前端纯css实现-3D图标交互动画

3D图标交互动画效果

通过css动画实现3D图标交互效果，其实本身通过 @keyframes 来控制逐帧图片不难，难的是3D序列帧图的制作。 以下的图都是之前我摘自阿里云官网上的图标--老规矩先来个免责😁

HTML部分

 <div id="app" class="layout-page">
    <!-- card start -->
    <div class="ui-card-box" v-for="(i,index) in list" :key="index">
      <i class="img" :style="`background:url(${i.iconSrc});background-size:100%;`"/>
      <p>{{ i.label }}</p>
    </div>
    <!-- card end -->
</div>   

样式部分

.layout-page{ 
  width: 100%;
  height: 100%; 
  padding:20px;
  box-sizing: border-box;
  background: #001427;
  overflow:auto;
}

// 进入动画
@keyframes move {
  0% {
    background-position: 0 0
  }
  100% {
    background-position: 0 -1280px 
    /* 动画帧-1  1340px-64 */
  }
} 
// 退出动画
@keyframes moveOut {
  0% {
    background-position: 0 -1280px
  }
  100% {
    background-position: 0 0px 
    /* 动画帧-1  1340px-64 */
  }
}  
// 逐帧动画盒子css
.ui-card-box{
  display: inline-flex;
  flex-direction: column;
  width: 160px;
  height: 200px;
  align-items: center;
  justify-content: center;
  transition: 0.6s;
  background: #05233f; 
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid;
  margin:8px;

  $PrimaryColor:#ff6a00; //主题色

  // 图标
  .img{
    width: 64px;
    height: 64px;
    background-size:100%;
    border: none;
    animation: moveOut 0.6s forwards steps(20,end);
  }
  p{
    font-size: 12px;
    color:#fff;
  }
  &:hover{
    color:$PrimaryColor;
    border: 1px solid $PrimaryColor;
    box-shadow: 0px 2px 12px 0px rgba(#ff6a00,0.5);
    .img{
      animation: move 0.6s forwards steps(20,end); 
    }
  }

}

数据结构

   list:[
        {
          iconSrc:"xxxxx",
          label:"弹性计算"
        },{
          iconSrc:"xxxxx",
          label:"人工智能"
        },{
          iconSrc:"xxxxx",
          label:"网络与CDN"
        }
      ]

序列帧图标

此图标是从阿里云官网上拿过来的 --摘自阿里云 为什么文章里我要加这一章节列，主要目的是拿到图片的url 这样在码上掘金里就可以引用地址了。嘿嘿😀

图标-弹性计算	图标-人工智能	图标-网络与CDN