丸子学CSS（学习半小时 - 色彩渐变）

使用 CSS 渐变可以在两种颜色间制造出平滑的渐变效果。
用它代替图片，可以加快页面的载入时间、减小带宽占用。同时，因为渐变是由浏览器直接生成的，它在页面缩放时的效果比图片更好
渐变分为线性渐变和径向渐变

线性渐变

创建一个线性渐变，至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）

background: linear-gradient(direction, color1, color2, ...);

从上到下

background: linear-gradient(#8BC6EC 0%, #9599E2 100%);

多个颜色

background: linear-gradient(#4158D0, #C850C0, #FFCC70 );

控制渐变范围

background: linear-gradient(#3EECAC 30%, #EE74E1 100%);

左右渐变

background: linear-gradient(to right ,#FFE53B 0%, #FF2525 74%);

角度渐变

background: linear-gradient(45deg,#21D4FD 0%, #B721FF 100%);

角度多个颜色渐变

background: linear-gradient(45deg,#21D4FD 0%, #B721FF 33%, #40d435 66%, #b149ae 100%);

左右平分

background: linear-gradient(to left, #80e40e 50%, #FF5ACD 50%);

重复渐变

background: repeating-linear-gradient(#4158D0,#C850C0 ,#FFCC70 10%);

角度重复渐变

background: repeating-linear-gradient(45deg,#0093E9 10%,#80D0C7 30%);

尝试一下

.box{
  width: 460px;
  height: 45px;
  background: black;
  border-radius: 5px;
  margin: 100px auto;
}
span{
  display: inline-block;
  width: 70%;
  height: 45px;
  border-radius: 3px;
  background-color: deepskyblue;
  background-image: linear-gradient(135deg,skyblue 25%,transparent 25%,transparent 50%,skyblue 50%,skyblue 75%,transparent 75%,transparent);
  background-size: 30px 30px;
  animation: animation 3s linear infinite;
}
@keyframes animation{
  from{
    background-position: 0 0 ;
  }
  to{
    background-position: 60px 0;
  }
}

径向渐变

创建一个径向渐变，也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。
同时也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

均匀分布

background: radial-gradient(#f17c39,#F7CE68);

控制渐变范围

background: radial-gradient(#00DBDE 30%,#FC00FF);

控制渐变原点

background: radial-gradient(at top left,#FAD961,#F76B1C 65%);

重复渐变

background: repeating-radial-gradient(#f537a2 ,#33e9ac 10%);

尝试一下

.box {
    width: 350px;
    height: 350px;
    background: repeating-radial-gradient(at 175px 175px ,rgb(135, 16, 233) ,rgb(19, 233, 233) 5%);
    animation: animation 2s linear infinite alternate;
}
@keyframes animation{
    from{
        background-size: 350px 350px;
    }
    to{
        background-size: 1050px 1050px;
    }
}