cssbox中的经验

1

calc ( ) 的用法。执行接替执行每一个

  <div class="bl">
    <span style="--i:1">加</span>
    <span style="--i:2">载</span>
    <span style="--i:3">中</span>
    <span style="--i:4">，</span>
  </div>

.bl span{
  display: inline-block;
  color: #fff;
  font-size: 2em;
  animation: animate 1s ease-in-out infinite;
  animation-delay: calc(.1s*var(--i));		//⭐⭐⭐
}
@keyframes animate{
  0%{transform: translateY(0px);}
  20%{transform: translateY(-24px);}
  60%,100%{transform: translateY(0px);}
}

---

2