利用css實現div背景顏色動態漸變

2021-07-30 13:06:13 字數 442 閱讀 3813

在做比較炫酷的現代風格網頁時,乙個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物件中,樣式屬性與樣式標籤屬性的語法中的引數型別基本相同...