技術標籤：神奇的csscss3htmlanimation

動畫主要靠這個部分實現

@keyframes LeftToRight {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
//使用
{
   animation: LeftToRight 3s infinite;
}

具體程式碼如下

        <div class="text">
          <p>裝置接入</p>
          <div>
            <img src="../../../assets/image/icon_equip.png" />
            <span class="number">
              <p class="unit">個</p>
              <span class="num">12.8</span>
              萬
            </span>
          </div>
        </div>
      </el-button>
      <style>
      .el-button {
      position: relative;
      width: 28%;
      height: 45%;
      padding: 0;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.16);
      color: #fff;
      margin: 2% 1.5% 0 1.5%;
      font-size: 12px;

      .text {
        width: 76%;
        font-size: 12px;
        color: #fff;
        text-align: left;
        position: absolute;
        z-index: 2;
        top: 12%;
        left: 10%;

        p {
          margin: 0 auto 30% 0;
          line-height: 20px;
          text-align: left;
        }
        .unit {
          text-align: right;
          margin-bottom: 12px;
        }
        .number {
          font-size: 12px;
          position: absolute;
          bottom: 2px;
          right: -2px;
        }
        .num {
          font-size: 15px;
        }
        img {
          height: 28px;
        }
        img.large {
          height: 34px;
          margin-bottom: -3px;
        }
      }
}
    .el-button::after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      transition: 0.3s;
      opacity: 0.3;
      background: rgba(0, 0, 0, 0.8);
      transform-origin: left;
      animation: LeftToRight 3s infinite;
    }

    .el-button:hover::after {
      transform: scaleX(1);
    }
@keyframes LeftToRight {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
</style>