vue遮罩层

利用css的变量
是使用- -开头的

  <li style="--line-index: 1;"></li>
  <li style="--line-index: 2;"></li>
  <li style="--line-index: 3.5;"></li>
  <li style="--line-index: 5.5;"></li>
  <li style="--line-index: 8;"></li>
  <li style="--line-index: 11;"></li>

打的popup包围晓得popup-info
利用v-show来做显示控制，要么一起出现，要么都不出现
遮罩层颜色为background-color: rgba(0, 0, 0, 0.6);

  <div class="popup" v-show="show">
      <div class="popup-info">

利用变量做延时动画

.loading > li {
   
  /* 这里看起来只设置了一个的样式，其实设置了.loading下面所有近邻的li因为他们在定义时
        style="--line-index:1"给他们设置了变量，所以到最后我们可以根据设置不同number值来
        设置不同的时间做到不用的li有不同的延时效果 */
  /* 我们在每一个li元素的行内元素都定义了一个css变量 --line-index大小不同 */
  /* 此时定一个动画延迟的变量--time 经过计算calc */
  --time: calc((var(--line-index) - 1) * 200ms);
  border-radius: 3px;
  width: 6px;
  height: 30px;
  background-col