效果如下

02.gif

View部分

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

JS部分

  1. var app = new Vue({
  2.   el: '#app',
  3.   data() {
  4.     return {
  5.     }
  6.   }, 
  7.   methods: {
  8.   }
  9. });

css 部分

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