CSS中可以使用background屬性來設置元素的背景樣式。如果我們需要讓背景具有漸變動畫效果,則需要使用CSS3中的漸變函數和動畫屬性。
/* 設置元素的初始背景樣式 */ div { background: linear-gradient(to right, blue, red); } /* 定義背景顏色漸變動畫序列 */ @keyframes bg-color { 0% {background-position: left;} 100% {background-position: right;} } /* 設置背景顏色漸變動畫 */ div { background-size: 200% 100%; animation: bg-color 2s ease-in-out infinite; }
上述代碼中,我們使用linear-gradient函數來定義了水平向右的背景漸變,后面的兩個參數分別是漸變起點的顏色和結束點的顏色。
接著,我們使用@keyframes定義了一個名為bg-color的動畫序列,表示在0%到100%動畫時間內該元素的背景位置會從左向右移動,最終停在右邊。
最后,我們在div元素的樣式中使用background-size屬性來設置元素背景的寬度為原來的兩倍,即200%。然后,再將動畫屬性animation應用于該元素中,對應的動畫序列為bg-color,動畫持續時間為2秒,動畫時間函數為ease-in-out,動畫無限循環。
這樣,在瀏覽器中就能看到一個具有背景漸變動畫效果的元素了。
上一篇css如何讓盒子不換行
下一篇css如何讓表格行占兩列