利用css實現div背景顏色動態漸變
阿新 • • 發佈：2019-01-01
在做比較炫酷的現代風格網頁時，一個div的顏色可能是動態的，不斷變化的。下面來說一下這種效果是如何實現的。
用到的css方法：
（1）linear-gradient:用於設定漸變的顏色：background: linear-gradient(90deg, #496eaa, #944fa8, #a8804f, #496eaa);
其中為了保證顏色變化的連貫性，第一個顏色屬性與最後一個顏色屬性最好一致（非必須，僅僅是為了滿足視覺效果）
（2）animation（IE和google瀏覽器需要使用-webkit-animation或者-moz-animation）：定義顏色漸變的動作。
@keyframes mymove
{
0%{
background-position: 0% 0%;
}
50%{
background-position: 50% 100%;
}
100%{
background-position: 100% 0%;
}
}
這是所定義的具體動作。
測試樣例原始碼：
<!doctype html> <html lang="en"> <head> <style> div{ background: linear-gradient(90deg, #496eaa, #944fa8, #a8804f, #496eaa); background-size:1400% 300%; position:absolute; top:10px; left:10px; animation:mymove 20s ease infinite; -webkit-animation: mymove 20s ease infinite; -moz-animation: mymove 20s ease infinite; } @keyframes mymove { 0% { background-position: 0% 0%; } 50% { background-position: 50% 100%; } 100% { background-position: 100% 0%; } } </style> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> </head> <body> <div style="width:100%;height:800px"> </div> </body> </html>