腾讯云动态图标效果(帧动画)

展示效果

上传简书后gif不会动了，参考腾讯云官网看效果

代码实现：

<template>
  <div class="t-cloud">
    <div class="market-item">
      <i></i>
      <div>音视频</div>
    </div>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped lang="scss">
.t-cloud {
  width: 100%;
  height: 100%;
}

.market-item {
  margin: 180px auto;
  width: 108px;
  height: 108px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background-image: linear-gradient(0deg, #fff, #f3f5f8);
  border: 2px solid #fff;
  box-shadow: 8px 8px 20px 0 rgba(55, 99, 170, .1), -8px -8px 20px 0 #fff;
  border-radius: 10px;
  transition: all .2s ease-in-out;

  i {
    background: url('@/assets/img/t-cloud.png');
    display: block;
    width: 60px;
    height: 60px;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top;
    margin-bottom: 10px;
    animation: icon-leave .3s steps(16) forwards;
  }

  &:hover {
    background: #f3f5f8;
    i {
      animation: icon-enter .3s steps(16) forwards;
    }
  }

}

@keyframes icon-leave {
  0% {
    background-position: 0 -960px;
  }

  100% {
    background-position: 0 0;
  }
}

@keyframes icon-enter {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 0 -960px;

  }
}</style>

帧动画：.3s steps(16） 在300毫秒内播放16帧，t-cloud.png图片分次16分就可以看到动态效果了

知识点

animation-timing-function

● linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
● ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
● ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
● ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
● ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
● step-start：等同于 steps(1, start)
● step-end：等同于 steps(1, end)
● steps(<integer>[, [ start | end ] ]?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
● cubic-bezier(<number>, <number>, <number>, <number>)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内