在做比較炫酷的現代風格網頁時,乙個div的顏色可能是動態的,不斷變化的。下面來說一下這種效果是如何實現的。
用到的css方法:
(1)linear-gradient:用於設定漸變的顏色:background: linear-gradient(90deg, #496eaa, #944fa8, #a8804f, #496eaa);
其中為了保證顏色變化的連貫性,第乙個顏色屬性與最後乙個顏色屬性最好一致(非必須,僅僅是為了滿足視覺效果)
(2)animation(ie和google瀏覽器需要使用-webkit-animation或者-moz-animation):定義顏色漸變的動作。
@keyframes mymove
50%100%
這是所定義的具體動作。
測試樣例源**:
利用純CSS實現條紋背景
下面我們來試試 1 等寬條紋 background image linear gradient 0deg,red 50 green 50 background size 100 20px 效果如圖 2 不等寬條紋 利用上述同樣的方法,只需要調整調整色標的位置值即可。background image ...
CSS3實現背景顏色漸變
css漸變色概念 css漸變色 gradients 能讓我們用一種顏色漸變的效果修飾乙個空間 從一種顏色過渡到另外一種顏色 填充這個空間。漸變色有兩個形式 linear 線性漸變 和radial 環形漸變 很顯然css漸變色 gradients 技術是產生了一種視覺圖案效果,而實現這種視覺效果很簡單...
CSS顏色和背景屬性
一 介紹 1 backgroundcolor屬性 backgroundcolor屬性用於設定或檢索物件的背景顏色。其對應的樣式標籤屬性為background color屬性。語法 background color color 說明 在style物件中,樣式屬性與樣式標籤屬性的語法中的引數型別基本相同...