纯CSS动画实现轮播目录齿轮图

效果描述

轮播图的轮播内容有四个元素，这四个元素围绕着中间的底座图片旋转。为了显示出3D的视觉效果，元素的旋转路径为椭圆。元素旋转90°会停顿一下，四个元素的停顿和旋转都是同步的，停顿的角度分别为3点钟、6点钟、9点钟和12点钟方向，当元素旋转到6点钟方向时即为视觉效果最前方，此时元素图标高亮显示，元素右侧出现信息弹窗。

代码分析

整个轮播图写在class为content的div元素下，包含3个子元素：img是中间的底座图片；class为ellipse的div元素是轮播轨迹，其下子元素是四个轮播元素；class为imgInfo的div元素代表四个轮播元素的信息。

<div class="content">
    <img src="./../../../assets/large_base.png">
    <div class="ellipse">
      <div class="businessItem" v-for="item in businessData" :key="item.type" :class="item.type">
        <span class="label">{{item.name}}</span>
        <span class="num">{{businessManage[item.type] ? businessManage[item.type].count : ''}}</span>
      </div>
    </div>
    <div class="imgInfo" v-for="item in businessData" :key="item.type" :class="item.type">
      <div class="tenant">租户：{{businessManage[item.type] ? businessManage[item.type].tenant : ''}}</div>
      <div class="bandwidth">带宽(M)：{{businessManage[item.type] ? businessManage[item.type].bandwidth : ''}}</div>
    </div>
</div>

ellipse样式：先利用border-radius画一个圆形，然后利用transform属性让轨迹看起来是一个椭圆。

.businessManage .content .ellipse {
  width: 290px;
  height: 290px;
  border-radius: 50%;
  position: absolute;
  border: 2px rgba(0, 0, 0, 0) solid;
  transform-style: preserve-3d;
  transform: rotateX(68deg);
  top: 8%;
  left: 0;
  right: 0;
  margin: auto;
}

businessItem相对ellipse绝对定位。

.businessManage .content .businessItem {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  background-image: url('./../../../assets/large_item.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
  height: 40%;
  width: 35%;
  padding-top: 1.3%;
}

每个元素的具体位置不一样，且实时变化，故要给每个元素指定一个动画控制其transform属性值和背景图片。

举例：

.businessItem.interconnect {
   animation: move 15s ease-in-out infinite;
}
@keyframes move {
  0% {
    transform: translateX(94px) rotateZ(0) translateX(145px) rotateZ(0) rotateX(-68deg);
    background-image: url('./../../../assets/large_item.png');
  }
  5%,25% {
    transform: translateX(94px) rotateZ(90deg) translateX(145px) rotateZ(-90deg) rotateX(-68deg);
    background-image: url('./../../../assets/large_cur.png');
  }
  30%,50% {
    transform: translateX(94px) rotateZ(180deg) translateX(145px) rotateZ(-180deg) rotateX(-68deg);
    background-image: url('./../../../assets/large_item.png');
  }
  55%,75% {
    transform: translateX(94px) rotateZ(270deg) translateX(145px) rotateZ(-270deg) rotateX(-68deg);
  }
  80%,100% {
    transform: translateX(94px) rotateZ(360deg) translateX(145px) rotateZ(-360deg) rotateX(-68deg);
  }
}

某个轮播元素旋转一个周期为100%，从0%到5%的过程中元素旋转到视线最前方，此时rotateZ发生变化，切换元素背景图片（高亮显示），从5%到25%的过程中元素停顿，状态不变，从25%到30%的过程中继续旋转，位置切换，背景图片切换成普通非高亮，以此类推。

imgInfo相对于content绝对定位，共有四个信息弹窗，每个弹窗的位置一样，都在最前方高亮元素的右侧。

.businessManage .content .imgInfo{
  width: 34%;
  height: 25%;
  position: absolute;
  top: 25%;
  left: 57%;
  background-image: url('./../../../assets/large_busiInfo.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
  color: #fff;
  text-align: left;
  padding-top: 1.5%;
  padding-left: 6.5%;
  opacity: 0;
}

给每个元素指定一个动画控制其opacity属性值，进而通过透明度来决定元素的显示与隐藏。

举例：

.imgInfo.interconnect {
    animation: busiInfo 15s steps(1) infinite;
}
@keyframes busiInfo {
  0%,25.1% {
    opacity: 0;
  }
  5%,25% {
    opacity: 1;
  }
}

信息弹窗的显示与隐藏的进程要与元素轮播旋转相对应，从5%到25%的过程中元素停顿，弹窗显示，其余过程隐藏，以此类推。