CSS3怎麼為背景圖加入動態變色效果-css教學-PHP中文網

CSS3怎麼為背景圖加入動態變色效果

青灯夜游

發布： 2021-08-24 09:12:44

原創

3433 人瀏覽過

在先前的文章《利用CSS3創造酷炫的三角背景影像》中，我們為大家介紹了一種創造酷炫三角背景影像的方法，有興趣的朋友可以去了解一下~

而下面本文再給大家介紹一種創建酷炫背景圖像方法，帶大家了解如何利用CSS3創建變色背景圖像動畫，讓你的網頁更吸引人！

我們先來看看效果圖

CSS3怎麼為背景圖加入動態變色效果

#下面我們來研究一下是怎麼實現這個效果的：

首先我們不建立標籤，直接在body標籤上設定背景圖片

rrreee

CSS3怎麼為背景圖加入動態變色效果

怎麼將圖片變色呢？這就需要在背景圖片上新增一個顏色層作為覆蓋層，這個可以利用linear-gradient()函數實作：

body {
   background-image: url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

登入後複製

CSS3怎麼為背景圖加入動態變色效果

此時這個還是靜態效果，怎麼達到不斷變色的動態效果？我們可以利用@keyframes和animation屬性來實現--新增動畫效果：

#利用animation屬性設定動畫名稱、播放時間、播放次數等：

background-image: 
           linear-gradient(4deg, rgba(0,255,254,0.3) 50%, rgba(0,255,254,0.3) 100%),
   url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");

登入後複製

animation-name：指定要綁定到選擇器的關鍵影格的名稱
animation-duration：動畫指定需要多少秒或毫秒才能完成
#animation-timing-function：設定動畫將如何完成一個週期
animation-delay：設定動畫在啟動前的延遲間隔。
animation-iteration-count：定義動畫的播放次數。
animation-direction：指定是否應該輪流反向播放動畫。
animation-fill-mode：規定動畫不播放時（當動畫完成時，或當動畫有延遲未開始播放時），要套用到元素的樣式。
animation-play-state：指定動畫是否正在運作或已暫停。

利用@keyframes定義每一幀動畫：

body {
  background-image: url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  animation-name: background-overlay-animation;
  animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}

登入後複製

下面給出完整程式碼：

@keyframes background-overlay-animation {
  0%   {
      background-image: 
        linear-gradient(4deg, rgba(255,78,36,0.3) 50%, rgba(255,78,36,0.3) 100%), 
		url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
  }
  25%  {
      background-image: 
         linear-gradient(4deg, rgba(213,49,127,0.3) 50%, rgba(213,49,127,0.3) 100%), 
		 url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
  }
  50%  {
    background-image: 
       linear-gradient(4deg, rgba(36,182,255,0.3) 50%, rgba(36,182,255,1) 100%),
     url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
  }
  100% {
    background-image: 
        linear-gradient(4deg, rgba(0,255,254,0.3) 50%, rgba(0,255,254,0.3) 100%),
        url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
  }
}

登入後複製

PHP中文網路平台有非常多的影片教學資源，歡迎大家學習《css影片教學》！

以上是CSS3怎麼為背景圖加入動態變色效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！