CSS学习笔记之可重复渐变（repeating-linear-gradient）

Formal grammar: repeating-linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ ) 

where <side-or-corner> = [left | right] || [top | bottom]
and <color-stop> = <color> [ <percentage> | <length> ]?

background-image:
    repeating-linear-gradient(#cdf0ff, #0ca0e9 25%);

background-image:
    repeating-linear-gradient(transparent, transparent 23%, #1294f6 23%, #1294f6 27%),
    repeating-linear-gradient(90deg, transparent, transparent 23%, #1294f6 23%, #1294f6 27%);

background-image:
    repeating-linear-gradient(45deg, transparent, transparent 20px, #1294f6 20px, #1294f6 40px)

  width: 226px;
  height: 20px;
  background-image:
      repeating-linear-gradient(45deg, transparent, transparent 20px, #1294f6 20px, #1294f6 40px);

animation: loading 5s linear infinite;

@keyframes loading {
  from { background-position-x: 0px; }
  to { background-position-x: 226px; }
}