CSS：实现动态旋转效果/椭圆渐变圆环旋转/椭圆轨迹旋转

某只杂鱼

已于 2023-07-31 16:58:42 修改

阅读量4.4k

点赞数 6

分类专栏：前端文章标签： css 前端

于 2022-05-07 00:05:04 首次发布

本文链接：https://blog.csdn.net/qq_36604536/article/details/124612795

版权

前端专栏收录该内容

22 篇文章 2 订阅

订阅专栏

文章目录

需求描述

需要类似图示的动态效果：
底部有两圈椭圆圆环，外侧圆环顺时针旋转，内侧圆环逆时针旋转，且外侧圆环上有一个圆点沿轨迹顺时针运动；中部有五个层叠圆盘，默认情况下它们静止且层叠，当满足一定条件时开始动画，将所有圆盘逆时针旋转并将除了最底层外的圆盘依序上下浮动。
参考效果图

实现思路

①将需求分解为4个div并一一实现效果：外侧圆环、内侧圆环、外侧轨迹圆点、层叠圆盘；
②外侧圆环、内侧圆环：实现思路相同，首先参考CSS圆锥渐变实现色彩渐变的正圆圆环，接下来使用CSS-transform进行变换：压缩圆环div的高度实现椭圆效果（变换div高度：transform-scaleY），然后添加旋转动画效果（变换div倾斜角度：transform-rotate）；
③外侧轨迹圆点：实现沿椭圆轨迹运动的圆点动效比较复杂，本文的实现方式主要参考了CSS椭圆轨迹旋转-参考链接1，此外翻到的CSS椭圆轨迹旋转-参考链接2这篇虽然在实现当前需求时没有用到，但感觉可以作为一种实现方式的补充（而且写得很用心吖~码一下☆▽☆）；
④层叠圆盘：实现思路与椭圆圆环基本一致，圆盘浮动效果只需增加一个改变圆盘纵向位置的动效，此外还需要在容纳所有圆盘的div上设置一个动效类（pie-spin）用于控制圆盘是否动画

代码

HTML

<div class="animate-icon">
  <!-- 外侧圆环div -->
  <div class="flat circle-outer">
    <!-- 笔者在同一个div中既压缩圆环又旋转圆环时出了问题，
            因此将压缩的样式提取为flat类套在上一层 -->
    <div class="content"></div>
  </div>
  
  <!-- 内侧圆环div -->
  <div class="flat circle-inner">
    <div class="content"></div>
  </div>
  
  <!-- 外侧轨迹圆点 -->
  <div class="circle-ball"></div>
  
  <!-- 层叠圆盘，当这个div有pie-spin类时进行动画 -->
  <div class="flat circle-pie pie-spin">
    <div class="content pie0"></div>
    <div class="content pie1"></div>
    <div class="content pie2"></div>
    <div class="content pie3"></div>
    <div class="content pie4"></div>
  </div>
</div>

CSS

.animate-icon {
  width: 200px;
  height: 200px;
  background: #2A2A2A;
}

/* 压缩div高度，将正圆变为椭圆 */
.flat {
  transform: scaleY(0.375);
}

.circle-outer {
  position: relative;
  left: 20px;
  top: 70px;
}

.circle-outer .content {
  width: 160px;
  height: 160px;
  border-radius: 80px;
  /* 圆锥渐变 */
  background: conic-gradient(fuchsia, pink, orange, gold, snow);
  /* 将圆中心“掏空”变成圆环 */
  --mask: radial-gradient(closest-side, transparent 94%, black 94%);
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
  animation: spin 4s linear infinite;
}

.circle-inner {
  position: relative;
  left: 40px;
  top: -72px;
}

.circle-inner .content {
  width: 120px;
  height: 120px;
  border-radius: 60px;
  background: conic-gradient(blue 40%, teal 72%, cyan 88%, blue);
  --mask: radial-gradient(closest-side, transparent 94%, black 94%);
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
  animation: spin-r 4s linear infinite;
}

.circle-ball {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background: snow;
  animation:
    animX 2s cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate,
    animY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
    spin-ball 4s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
}

.circle-pie {
  position: absolute;
  top: 200px;
  left: 58px;
}

.circle-pie .content {
  position: absolute;
  opacity: 0.6;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background: radial-gradient(seagreen 30%, limegreen 80%, lime);
}

.pie-spin .content {
  background: conic-gradient(lime 10%, mediumseagreen 30%, forestgreen 80%, lime);
}

.pie0 {
  top: -188px;
}

/* 设置圆盘逆时针旋转，不透明度动态变化
  （圆盘们浮动在下方叠起时变得更透明，否则变不透明） */
.pie-spin .pie0 {
  animation: 
    spin-r 4s infinite,
    pie-opa 4s infinite;
}

.pie1 {
  top: -240px;
}

/* 非最底层的圆盘需设置上下浮动动画 */
.pie-spin .pie1 {
  animation: 
    spin-r 4s infinite,
    pie-opa 4s infinite,
    pie-ani1 4s infinite;
}

.pie2 {
  top: -293px;
}

.pie-spin .pie2 {
  animation: 
    spin-r 4s infinite,
    pie-opa 4s infinite,
    pie-ani2 4s infinite;
}

.pie3 {
  top: -345px;
}

.pie-spin .pie3 {
  animation: 
    spin-r 4s infinite,
    pie-opa 4s infinite,
    pie-ani3 4s infinite;
}

.pie4 {
  top: -397px;
}

.pie-spin .pie4 {
  animation: 
    spin-r 4s infinite,
    pie-opa 4s infinite,
    pie-ani4 4s infinite;
}

/* 顺时针旋转动画 */
@keyframes spin {
  0% { transform: rotate(0deg);  }
  100% { transform: rotate(360deg); }
}

/* 逆时针旋转动画 */
@keyframes spin-r {
  0% { transform: rotate(360deg); }
  100% {  transform: rotate(0deg); }
}

/* 圆点横向运动变化，需根据真实效果调整参数 */
@keyframes animX{
  0% { left: 24px; }
  100% { left: 178px; }
}

/* 圆点纵向运动变化，需根据真实效果调整参数 */
@keyframes animY{
  0% {top: 122px;}
  100% {top: 182px;}
}

/* 圆点尺寸运动变化，实现转动时近大远小的效果 */
@keyframes spin-ball {
  0% { transform: scale(0.64); }
  50% { transform: scale(1); }
  100% { transform: scale(0.64); }
}

/* 圆盘不透明度变化效果 */
@keyframes pie-opa {
  0% { opacity: 0.3; }
  50% { opacity: 0.6; }
  100% { opacity: 0.3; }
}

/* 圆盘浮动效果：由于圆盘大小相同、层叠的距离也相同，
  非最底层的圆盘样式可以动态生成以减少重复代码 */
@keyframes pie-ani1 {
  0% { top: -198px; }
  30% { top: -240px; }  
  70% { top: -240px; }
  100% { top: -198px; }
}

@keyframes pie-ani2 {
  0% { top: -208px; }
  30% { top: -293px; }
  70% { top: -293px; }
  100% { top: -208px; }
}

@keyframes pie-ani3 {
  0% { top: -218px; }
  30% { top: -345px; }
  70% { top: -345px; }
  100% { top: -218px; }
}

@keyframes pie-ani4 {
  0% { top: -228px; }
  30% { top: -397px; }
  70% { top: -397px; }
  100% { top: -228px; }
}