css围绕人物旋转的卡片

前言

最近在做了一款可视化的项目，对于可视化来说可能没什么好讲的，因为主要就是一些图表和动画，今天讲的主要就是大屏中间部分的动画，一般领导喜欢看的也就是中间的动画和颜色搭配出来的暗黑科技效果了。开完项目启动会，领导发来微信，可以做成这种效果吗，如下

然后中间换成是一个人的图片，然后旋转的这些物体换为小卡片

初步思路

旋转的效果好做，主要是中间还有一个图片，那么肯定就不能使用一个盒子因为会出现两种情况。第一种就是一个盒子装入进行转到，然后通过唯一让每个卡片到指定的位置，但是这种情况的话会造成一个效果，那么就是这个盒子转动的话中间这张图片也会转动，第二种就是图片和这张图片不在一个盒子内，但是这种情况会造成转动的这个盒子时压在图片这个盒子上面的，做不到这种转到这个图片后面的视觉效果。 所以现在只能给单个元素加动画，然后在到固定的位置的时候进行设置透明度和缩小一些，也就是三组动画，一组时旋转，一组时透明度，还有一组时卡片的缩小增加视觉效果

初步实现

上面有了思路我们就开始实现一下，那么我们就需要来控制位置了，可以使用top,left来控制，也就是从左上角到右下角的一个动画，那么我们先写一下动画

    @keyframes scale {
      0% {
        transform: scale(0.5);
        opacity: 0.5;
      }

      50% {
        transform: scale(1);
        opacity: 1;
      }

      100% {
        transform: scale(0.5);
        opacity: 0.5;
      }

    }

    @keyframes animX {
      0% {
        left: -4%;
      }

      100% {
        left: 96%;
      }
    }

    @keyframes animY {
      0% {
        top: -4%;
      }

      100% {
        top: 96%;
      }
    }

这样我们又三个动画，分别是控制他的位置，大小，透明度，来做到旋转且拥有旋转到图片背后的那种视觉感 然后我们对每个元素进行动画的应用

    .box>div:nth-child(1) {
      animation: animX 12s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate,
        animY 12s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
        scale 24s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
    }

    .box>div:nth-child(2) {
      animation: animX 12s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate,
        animY 12s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite alternate,
        scale 24s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite alternate;
    }

    .box>div:nth-child(3) {
      animation: animX 12s cubic-bezier(0.36, 0, 0.64, 1) -14s infinite alternate,
        animY 12s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate,
        scale 24s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate;
    }

    .box>div:nth-child(4) {
      animation: animX 12s cubic-bezier(0.36, 0, 0.64, 1) -18s infinite alternate,
        animY 12s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate,
        scale 24s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate;

    }

    .box>div:nth-child(5) {
      animation: animX 12s cubic-bezier(0.36, 0, 0.64, 1) -22s infinite alternate,
        animY 12s cubic-bezier(0.36, 0, 0.64, 1) -16s infinite alternate,
        scale 24s cubic-bezier(0.36, 0, 0.64, 1) -16s infinite alternate;
    }

我们设置不同的开始时间，避免一起开始动画，因为一起开始动画的话会导致所有元素还是堆在一起运动 我们就实现了下面的效果

这里没有录制Gif图，实际为动效的

效果进阶

这里我们实现了基础的效果，但是领导要的是卡片形状的，这个好修改，但是现在又加了行的要求，那就是想上面一样，转到后面的时候应该看到的是背面，并且是会被遮挡住的，并且不是完全遮挡，就是人物，也就是中间哪个图片，会遮挡到转到他后面的哪个卡片。也就是和咱们刚开始哪两种融合在一起比较像，就是既需要在中间，还不能进行旋转。

一开始有点迷，后来突然有了思路，就是可以再套一层盒子，开启preserve-3d 结构修改为这样

    <div id="app">
      <div class="container" >
        <div class="box">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
        <div class="img">
            <img src="https://img.tukuppt.com/png_preview/00/08/56/3rdkq51nu2.jpg!/fw/780" alt="">
        </div>
      </div>
    </div>

.container{
    transform-style: preserve-3d;

}
.img{
    width: 200px;
    height: 300px;
    position: absolute;
}

这样就实现了想要的效果

结尾

这次主要是熟悉一下css的动画，管理系统写多了日常都是直接用的UI框架，发现css已经都要忘完了