CSS变量，实现条形加载

CSS终于也有变量了，原生 CSS 从此变得异常强大。

CSS变量又名CSS自定义属性，指可在整个文档中重复使用的值。它由自定义属性--var和函数var()组成，var()用于引用自定义属性。

谈到为何会在CSS中使用变量。示例：

 1 /* 不使用变量 */
 2 .title {
 3     background-color: red;
 4 }
 5 .desc {
 6     background-color: red;
 7 }
 8 
 9 /* 使用变量 */
10 :root {
11     --bg-color: red;
12 }
13 .title {
14     background-color: var(--bg-color);
15 }
16 .desc {
17     background-color: var(--bg-color);
18 }

CSS使用变量有如下好处。

减少样式代码的重复性
增加样式代码的扩展性
提高样式代码的灵活性
增多一种CSS与JS的通讯方式
不用深层遍历DOM改变某个样式

可能有些同学会问，sass和less早就实现了变量该特性，何必再多此一举呢？可是细想一下，变量对比Sass变量和Less变量又有它的过人之处。

浏览器原生特性，无需经过任何转译可直接运行
DOM对象一员，极大便利了CSS与JS间的联系

如何使用变量

声明：--变量名
读取：var(--变量名, 默认值)
类型
- 普通：只能用作属性值不能用作属性名
- 字符：与字符串拼接 "Hello, "var(--name)
- 数值：使用calc()与数值单位连用 var(--width) * 10px
作用域
- 范围：在当前节点块作用域及其子节点块作用域下有效
- 优先级别：内联样式 = 外联样式 > ID选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器 > 通配选择器 = 后代选择器 = 兄弟选择器

场景

其实变量有一个特别好用的场景，那就是结合List集合使用。

实例

条形加载条

一个条形加载条通常由几条线条组成，每条线条对应一个存在不同时延的相同动画，通过时间差运行相同动画，从而产生加载效果。

1 <ul class="strip-loading">
2     <li v-for="v in 6" :key="v" :style="`--line-index: ${v}`"></li>
3 </ul>

 1 .strip-loading {
 2     display: flex;
 3     justify-content: center;
 4     align-items: center;
 5     width: 200px;
 6     height: 200px;
 7     li {
 8         --time: calc((var(--line-index) - 1) * 200ms);
 9         border-radius: 3px;
10         width: 6px;
11         height: 30px;
12         background-color: #f66;
13         animation: beat 1.5s ease-in-out var(--time) infinite;
14         & + li {
15             margin-left: 5px;
16         }
17     }
18 }
19 @keyframes beat {
20     0%,
21     100% {
22         transform: scaleY(1);
23     }
24     50% {
25         transform: scaleY(.5);
26     }
27 }

这就是变量的作用范围所致(在当前节点块作用域及其子节点块作用域下有效)，因此在.strip-loading的块作用域下调用--line-index是无效的。

示例二：改编心型加载条

1 <div class="heart-loading">
2     <ul style="--line-count: 9">
3         <li v-for="v in 9" :key="v" :class="`line-${v}`" :style="`--line-index: ${v}`"></li>
4     </ul>
5 </div>

  1 .heart-loading {
  2     display: flex;
  3     justify-content: center;
  4     align-items: center;
  5     width: 200px;
  6     height: 200px;
  7     ul {
  8         display: flex;
  9         justify-content: space-between;
 10         width: 150px;
 11         height: 10px;
 12     }
 13     li {
 14         --Θ: calc(var(--line-index) / var(--line-count) * .5turn);
 15         --time: calc((var(--line-index) - 1) * 40ms);
 16         border-radius: 5px;
 17         width: 10px;
 18         height: 10px;
 19         background-color: #3c9;
 20         filter: hue-rotate(var(--Θ));
 21         animation-duration: 1s;
 22         animation-delay: var(--time);
 23         animation-iteration-count: infinite;
 24         &.line-1,
 25         &.line-9 {
 26             animation-name: beat-1;
 27         }
 28         &.line-2,
 29         &.line-8 {
 30             animation-name: beat-2;
 31         }
 32         &.line-3,
 33         &.line-7 {
 34             animation-name: beat-3;
 35         }
 36         &.line-4,
 37         &.line-6 {
 38             animation-name: beat-4;
 39         }
 40         &.line-5 {
 41             animation-name: beat-5;
 42         }
 43     }
 44 }
 45 @keyframes beat-1 {
 46     0%,
 47     10%,
 48     90%,
 49     100% {
 50         height: 10px;
 51     }
 52     45%,
 53     55% {
 54         height: 30px;
 55         transform: translate3d(0, -15px, 0);
 56     }
 57 }
 58 @keyframes beat-2 {
 59     0%,
 60     10%,
 61     90%,
 62     100% {
 63         height: 10px;
 64     }
 65     45%,
 66     55% {
 67         height: 60px;
 68         transform: translate3d(0, -30px, 0);
 69     }
 70 }
 71 @keyframes beat-3 {
 72     0%,
 73     10%,
 74     90%,
 75     100% {
 76         height: 10px;
 77     }
 78     45%,
 79     55% {
 80         height: 80px;
 81         transform: translate3d(0, -40px, 0);
 82     }
 83 }
 84 @keyframes beat-4 {
 85     0%,
 86     10%,
 87     90%,
 88     100% {
 89         height: 10px;
 90     }
 91     45%,
 92     55% {
 93         height: 90px;
 94         transform: translate3d(0, -30px, 0);
 95     }
 96 }
 97 @keyframes beat-5 {
 98     0%,
 99     10%,
100     90%,
101     100% {
102         height: 10px;
103     }
104     45%,
105     55% {
106         height: 90px;
107         transform: translate3d(0, -20px, 0);
108     }
109 }

哈哈，原来不用一句JS也能做出好看好玩的特效效果，加油吧，骚年！

佳物不独来，万物同相携。