css渐变 linear-gradient、repeating-linear-gradient

css渐变 linear-gradient、repeating-linear-gradient

参考：详解 linear-gradient 和 radial-gradient 的使用

定义

CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。

linear-gradient() 本质：是图片，函数创建的是过渡颜色的图片，

1. linear-gradient(angle | to <side-or-corner> ,<color> [ <color-stop-length> ]?)

• angle | to <side-or-corner>

  • | 管道符：表示排他。angle 或者 to <side-or-corner>都支持，但只能同时是其中一个，要么是角度angle，要么是 to <side-or-corner>。
  • angle 用角度值指定渐变的方向（或角度）,0deg竖直向上，角度增加，方向顺时针改变

  background:linear-gradient(90deg,red,yellow); /* 水平向右的方向 从红色平滑过渡到黄色 */
  

  • to <side-or-corner>：to left、to right、to top、to bottom、to left top、to left bottom、to right top、to right tottom
  • 不写默认180deg从上到下的方向
  • <color> [ <color-stop-length> ]?
    • [ <color-stop-length> ]?可选值
    • <color-stop-length> = [ <percentage> | <length> ]{1,2} ：
      • percentage与length| 单管道符，说明只能选一种类型
      • {1,2}可以有1个 percentage 或者2 percentage (length同理)

background: linear-gradient(to right,red 20% ,green 80%);
/*
1. 方向向右
2. 0~20%: red 纯色填充
3. 80%~100%: green 纯色填充
4. 20%~80%: red 到 green 渐变填充
*/

• background多个linear-gradient层级问题：先添加的 linear-gradient 的层级最高

.box{
  background:linear-gradient(0deg,rgba(255,0,0,1),rgba(255,0,0,0) 50%);
}
.box{
  background:linear-gradient(180deg,rgba(0,0,255,1),rgba(0,0,255,1) 100%);
}
.box{
  background:linear-gradient(0deg,rgba(255,0,0,1),rgba(255,0,0,0) 50%),  
             linear-gradient(180deg,rgba(0,0,255,1),rgba(0,0,255,1) 100%);
}

=> 可以看出第一个渐变层级最高

2. repeating-linear-gradient

repeating-linear-gradient() 创建一个由重复线性渐变组成的， 这是一个类似 linear-gradient 的函数，并且采用相同的参数，但是它会在所有方向上重复渐变以覆盖其整个容器.

/* 设置 green 10% ，渐变从 0%-10% 开始渐变，没有填满整个背景，开始重复 */
background-image: repeating-linear-gradient(90deg, blue, green 10%);

background-image: repeating-linear-gradient(90deg, blue, green 10%);
background-size: 100% 20%;
background-repeat: no-repeat;

.progress-outer {
  background-color: rgba(180, 160, 120, .2);
  width: 100%;
  height: 20px;
  border-radius: 20px;
}
.progress-bg {
  width:10%;
  height: 100%;
  border-radius: 20px;
  background-image: repeating-linear-gradient(45deg, #D9CFBB 25%, #C3B393 0, #C3B39350%, #D9CFBB 0, #D9CFBB 75%, #C3B393 0);
  background-size: 16px 16px;
  animation: 	panoramic 10s linear forward;
}

@keyframe panoramic {
  to {
    width: 100%; /* 进度条从width的 10% 到 100% */
    background-position: 160% 0; /* 进度条走进度的时候，条纹背景有种流动的效果 */ 
  }
}