如何实现骨架占位盒子的动画效果

html

<template>
    <div class="skeleton"></div>
</template>

css

.skeleton {
    background: linear-gradient(90deg, #f2f2f2 25%, #e1e6e8 37%, #f2f2f2 63%);
    background-size: 400% 100%;
    animation: skeleton-loading 1.4s ease infinite;
  }
  @keyframes skeleton-loading {
    0% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0 50%;
    }
  }