css background gradient（上）

大家都知道 background这个属性是可以设置背景图片 但是我们今天说的是gradient

大家常用的一般是 linear gradient (x deg, color ...) 就可以生成一张渐变背景图
css中 这个属性 包括下面几个属性的返回值是<gradient> 他会被认为是图片的一种，所以可以直接赋值给 background-image

1. 参数color上可以设置color的占比 px 和 %都支持 同时 最后一个color会自动占满之后的区域

background-image: linear-gradient(45deg, red 25px, yellow 50px, red 75px);

color占比

2. 如果设置background-size

height: 30px;
background-image: linear-gradient(45deg, red 25%, yellow 50%, red 75%);
background-size: 30px 30px;

设置size

3. 到这里 就可以引入我们第一个重点
   repeating-linear-gradient
   尝试去用它

height: 30px;
background-image: repeating-linear-gradient(45deg, red 25%, yellow 50%, red 75%);
background-size: 30px 30px;

repeating-linear-gradient

注意这个函数的repeating 和 background-repeat这个属性

4. 两个color之间表示渐变的颜色，当color的位置之间有冲突的时候，color的渐变会消失

height: 30px;
background-image: repeating-linear-gradient(45deg, red 0, red 25%, yellow 0%, red 50%);
background-size: 30px 30px;

消失的渐变

看起来很不错 如果动起来会不会更不错

4. 加入动画

@keyframes pos {
    0 {
        background-position-x: 0;
    }
    100% {
        background-position-x: 30px;
    }
}
animation: pos 0.3s linear infinite;(最后一个参数表示动画循环播放)

自己动手来看看这个动画的效果吧 看看像不像托尼老师的门面