站長資訊網(wǎng)在之前的文章《利用CSS3創(chuàng)建炫酷的三角背景圖像》中，我們給大家介紹了一種創(chuàng)建炫酷三角背景圖像的方法，感興趣的朋友可以去了解一下~
而下面本文再給大家介紹一種創(chuàng)建炫酷背景圖像方法，帶大家了解一下如何利用CSS3創(chuàng)建變色背景圖像動畫，讓你的網(wǎng)頁更吸引人！
我們先來看看效果圖
下面我們來研究一下是怎么實(shí)現(xiàn)這個效果的：
首先我們不創(chuàng)建標(biāo)簽，直接在body標(biāo)簽上設(shè)置背景圖片
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; }
怎么將圖片變色呢？這就需要在背景圖片上添加一個顏色層作為覆蓋層，這個可以利用linear-gradient()函數(shù)實(shí)現(xiàn)：
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");
此時這個還是靜態(tài)效果，怎么實(shí)現(xiàn)不斷變色的動態(tài)效果？我們可以利用@keyframes和animation屬性來實(shí)現(xiàn)–添加動畫效果：
-
利用animation屬性設(shè)置動畫名稱、播放時間、播放次數(shù)等：
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; }
animation-name：指定要綁定到選擇器的關(guān)鍵幀的名稱
animation-duration：動畫指定需要多少秒或毫秒完成
animation-timing-function：設(shè)置動畫將如何完成一個周期
animation-delay：設(shè)置動畫在啟動前的延遲間隔。
animation-iteration-count：定義動畫的播放次數(shù)。
animation-direction：指定是否應(yīng)該輪流反向播放動畫。
animation-fill-mode：規(guī)定當(dāng)動畫不播放時（當(dāng)動畫完成時，或當(dāng)動畫有一個延遲未開始播放時），要應(yīng)用到元素的樣式。
animation-play-state：指定動畫是否正在運(yùn)行或已暫停。
-
利用@keyframes定義每一幀動畫：
@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"); } }
下面給出完整代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> @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"); } } @-webkit-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"); } } 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; } </style> </head> <body> <!-- 你的內(nèi)容放在這里 --> </body> </html>
PHP中文網(wǎng)平臺有非常多的視頻教學(xué)資源，歡迎大家學(xué)習(xí)《css視頻教程》！
