<ul class="loading">
  <li v-for="item in 5" :key="item"  :style="{‘--line-index‘:item}"></li>
</ul>

//css样式
.loading{
  display:flex;
  justify-content:center;
  align-items:center;
  width:200px;
  height:200px;
  list-style:none;

  li{
    --time:calc((var(--line-index) - 1) * 200ms);
    border-radius:3px;
    width:6px;
    height:30px;
    background-color:#f66;
    animation:running 1.5s ease-in-out var(--time) infinite;
    &+li{
      margin-left:5px;
    }
  }
}
@keyframes running{
   0%,
   100%{
     transfrom:scaleY(1);
   }
   50%{
     transform:scaleY(.5);
   }
}

//这里会用到这两个css属性：  --time   和  --line-index 。(讲真，从未用过这个，??，这次学习了)
//如果不用这两个属性样式的话，就需要把每个li都需要写animation-delay样式，例如：
&:nth-child(2){
   animation-delay:200ms;
}
&:nth-child(3){
   animation-delay:400ms;
}
...依次类推


//效果展示：(会动的哦)

<div class="bubble"></div>

//css样式
.bubble{
   position:relative;
   border-radius:5px;
   width:200px;
   height:50px;
   border:2px solid #f90;
   text-align:center;
   color:#fff;
   &::before{
      position:absolute;
      left:100%;
      top:50%;
      margin:-5px 0 0 2px;
      border:5px solid transparent;
      border-left-color:#f90;
      content:‘‘;
   }
   &::after{
      position:absolute;
      left:100%;
      top:50%;
      margin-top:-4px;
      border:4px solid transparent;
      border-left-color:#fff;
      content:‘‘;
   }
}
//::before 和 ::after 区别：
  before 和 after 是在元素前面和后面添加一些元素，因此是伪元素，

//展示效果

<div style="width:100px;height:100px">
   <div class="triangle"></div>
</div>

//css样式
.triangle{
   width:0;
   height:0;
   border:50px solid transparent;
   border-left-color:#f60;
}

//效果展示