首頁 >web前端 >css教學 >css如何實現網頁背景動態漸層效果

css如何實現網頁背景動態漸層效果

王林轉載: 2020-04-16 09:14:083351瀏覽

css如何實現網頁背景動態漸層效果

HTML部分:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title> 渐变——天际线</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
   <div>
      渐变——天际线
    </div>
</body>
</html>

實作背景顏色漸變不需要在HTML（結構）部分做任何操作這裡加了一行字，方便顯示效果；

（推薦教學：CSS教學）

CSS部分：

body{
  margin: 0;
  padding: 0;
  font-family: "montserrat";
  background-image: linear-gradient(125deg,#E4FFCD,#6DD5FA,#2980B9,#E4FFCD);  background-size: 400%;
  animation: bganimation 15s infinite;
}

.text{
  color: white;
  text-align: center;
  text-transform: uppercase;
  margin: 400px 0;
  font-size: 22px;
}

@keyframes bganimation {
  0%{
    background-position: 0% 50%;
  }
  50%{
    background-position: 100% 50%;
  }
  100%{
    background-position: 0% 50%;
  }
}

效果如圖：

css如何實現網頁背景動態漸層效果

#重點：

 background-image: linear-gradient（）；

linear-gradient() 函數用於建立線性漸變的"映像"。為了建立線性漸變，你需要設定一個起始點和一個方向（指定為一個角度）的漸變效果。你還要定義終止色。終止色就是你想讓Gecko去平滑的過渡，而且你必須指定至少兩種，當然也會可以指定更多的顏色去創造更複雜的漸層效果。

其中的「125deg」是設定漸層的傾斜角度；

background-position：

屬性設定背景影像的起始位置。

也可以試試這個桌布漸層：

background:white;
background-image: linear-gradient(90deg,
                  rgba(200,0,0,.5) 50%, transparent 0),
                  linear-gradient( 
                  rgba(200,0,0,.5) 50%, transparent 0);
background-size: 30px 30px;

推薦影片教學：

css影片教學######

以上是css如何實現網頁背景動態漸層效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css html

陳述：

本文轉載於：jb51.net。如有侵權，請聯絡admin@php.cn刪除

上一篇：關於css中的類別名稱問題的介紹下一篇：關於css中的類別名稱問題的介紹

看更多