大家都知道 background這個屬性是可以設置背景圖片 但是我們今天說的是gradient
大家常用的一般是 linear gradient (x deg, color ...) 就可以生成一張漸變背景圖
css中 這個屬性 包括下面幾個屬性的返回值是<gradient> 他會被認為是圖片的一種席吴，所以可以直接賦值給 background-image
- 參數(shù)color上可以設置color的占比 px 和 %都支持 同時 最后一個color會自動占滿之后的區(qū)域
background-image: linear-gradient(45deg, red 25px, yellow 50px, red 75px);
color占比
- 如果設置background-size
height: 30px;
background-image: linear-gradient(45deg, red 25%, yellow 50%, red 75%);
background-size: 30px 30px;
設置size
- 到這里 就可以引入我們第一個重點
repeating-linear-gradient
嘗試去用它
height: 30px;
background-image: repeating-linear-gradient(45deg, red 25%, yellow 50%, red 75%);
background-size: 30px 30px;
repeating-linear-gradient
注意這個函數(shù)的repeating 和 background-repeat這個屬性
- 兩個color之間表示漸變的顏色，當color的位置之間有沖突的時候，color的漸變會消失
height: 30px;
background-image: repeating-linear-gradient(45deg, red 0, red 25%, yellow 0%, red 50%);
background-size: 30px 30px;
消失的漸變
看起來很不錯 如果動起來會不會更不錯
- 加入動畫
@keyframes pos {
0 {
background-position-x: 0;
}
100% {
background-position-x: 30px;
}
}
animation: pos 0.3s linear infinite;(最后一個參數(shù)表示動畫循環(huán)播放)
自己動手來看看這個動畫的效果吧 看看像不像托尼老師的門面
