CSS 重复渐变(径向、线向) 实现斑马纹特性

我们有时候忘了使用重复渐变这个属性来实现效果

1 基本概念

1.1 线性渐变

developer.mozilla.org/zh-CN/docs/…

基本语法

repeating-linear-gradient( [ 角度 | to <side-or-corner> ],<color-stop> )
<side-or-corner> = [left | right] || [top | bottom]
<color-stop> = <color> [ <percentage> | <length> ]?
分成两部分看：
第一部分方向，可以用角度也可以用关键词（<side-or-corner>）
第二部分，也就是颜色渐变带，也就是从0到1来描述这条渐变带的颜色

举例意思也就是 [[color 0],[color 20%],[color 1]] => color 0,color 20%, color 1

1.2 径向渐变

developer.mozilla.org/zh-CN/docs/…
repeating-radial-gradient( [位置],[色阶列表]);
分成两部分看：
第一部分位置以及渐变形状，可以支持circle和ellipse两种类型渐变，简要语法如下

[渐变类型+ 'at' + 位置]

 background: repeating-radial-gradient(circle at center, rgba(68,206,246,0.5), rgba(68,206,246,0.5) 5px, white 5px, white 10px)

第二部分色阶列表，参照1.1.

2 实现效果

2.1 斑马纹渐变

这里面的要点是通过两个相同的颜色来避免颜色的渐变，实现条块。

<html>
  <head>
    <title>CSS 渐变</title>
    <meta charset="utf-8" />
    <style>
      .base {
        width: 200px;
        height: 200px;
      }
      .story1 {
        background: repeating-linear-gradient(
          45deg,
          rgba(68, 206, 246, 0.5),
          rgba(68, 206, 246, 0.5) 5px,
          white 5px,
          white 10px
        );
      }

      .story2 {
        background: repeating-radial-gradient(
          circle at center,
          rgba(68, 206, 246, 0.5),
          rgba(68, 206, 246, 0.5) 5px,
          white 5px,
          white 10px
        );
      }
      /* */
      .load {
        background: repeating-linear-gradient(
          45deg,
          rgba(68, 206, 246, 0.5),
          rgba(68, 206, 246, 0.5) 5px,
          white 5px,
          white 10px
        );
        /*一秒播一次的永动动画*/
        animation: move 1s linear infinite;
      }
      @keyframes move {
        0% {
        }
        100% {
          background-position: 50px; /*你可以试试这个可以控制速度*/
        }
      }
    </style>
  </head>

  <body>
    <p>线性渐变实现斑马纹</p>
    <div class="base story1"></div>
    <p>辐射渐变实现圆形斑马纹</p>
    <div class="base story2"></div>
    <p>滚动渐变动画</p>
    <div class="base load"></div>
  </body>
</html>

效果如图：

2.2 进度条加载动画

codepen练习链接： codepen.io/yatsov/pen/…