乐趣区

关于前端:css的rotate3d实现炫酷的圆环转动动画

jiezi

1. 实现成果

2. 实现原理

2.1 rotate3d

rotate3d：rotate3d() CSS 函数定义一个变换，它将元素围绕固定轴挪动而不使其变形。运动量由指定的角度定义; 如果为正，静止将为顺时针，如果为负，则为逆时针。

语法：

rotate3d(x, y, z, a)

含意：

x <number> 类型，能够是 0 到 1 之间的数值，示意旋转轴 X 坐标方向的矢量。

y <number> 类型，能够是 0 到 1 之间的数值，示意旋转轴 Y 坐标方向的矢量。

z <number> 类型，能够是 0 到 1 之间的数值，示意旋转轴 Z 坐标方向的矢量。

a <angle> 类型，示意旋转角度。正的角度值示意顺时针旋转，负值示意逆时针旋转。

2.2 rotateZ

rotateZ：函数定义了一个转换，它能够让一个元素围绕横 Z 轴旋转，而不会对其进行变形。旋转轴围绕原点旋转，而这个原点通过 transform-origin 属性来定义（默认的转换原点是 center）。
rotateZ(a) 相当于 rotate(a) or rotate3d(0, 0, 1, a)。

语法 

rotateZ(a)

含意：

rotateZ() 引起的旋转量由 <angle> 指定。如果为正，则顺时针方向挪动；如果为负，则逆时针方向挪动。
a 是一个‘angle’，示意旋转的角度。负数角度示意顺时针旋转，正数则示意逆时针旋转。
1turn：一圈，即 360deg。90deg = 0.25turn。

2.3 transform-origin

transform-origin: 更改一个元素变形的原点, 默认的转换原点是 center。
语法：

transform-origin: center;

含意：

transform-origin 属性能够应用一个，两个或三个值来指定，其中每个值都示意一个偏移量。没有明确定义的偏移将重置为其对应的初始值。
如果定义了两个或更多值并且没有值的关键字，或者惟一应用的关键字是 center，则第一个值示意程度偏移量，第二个值示意垂直偏移量。

关键字是不便的简写办法，等同于以下角度值：
| keyword | value |

left 0%
center 50%
right 100%
top 0%
bottom 100%

2.4 CSS 滤镜 filter 的 drop-shadow

drop-shadow：投影实际上是输出图像的 alpha 蒙版的一个含糊的、偏移的版本，用特定的色彩绘制并合成在图像上面。
函数承受 shadow(在 CSS3 背景中定义) 类型的值，除了 ”inset” 关键字是不容许的。该函数与已有的 box-shadow 属性很类似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。

语法：

drop-shadow(offset-x offset-y blur-radius spread-radius color)

含意：

offset-x offset-y (必须)：
offset- x 指定程度间隔，其中负值将暗影搁置到元素的左侧。offset- y 指定垂直距离，其中负值将暗影置于元素之上。如果两个值都为 0，则暗影间接搁置在元素前面。

blur-radius (可选)：
暗影的含糊半径，指定为 <length>。值越大，暗影就越大，也越含糊。如果未指定，则默认为
0，从而产生清晰、不含糊的边缘。不容许有负值。

spread-radius (可选)：
暗影的扩大半径，指定为 <length>.
正的值会导致暗影扩充和变大，而负的值会导致暗影放大。如果未指定，则默认为 0，暗影的大小将与输出图像雷同。

color (可选)：
暗影的色彩，指定为 color。如果未指定，则应用 color 属性的值。如果色彩值省略，WebKit 中暗影是通明的。

留神：box-shadow 属性在元素的整个框前面创立一个矩形暗影，而 drop-shadow() 过滤器则是创立一个合乎图像自身形态 (alpha 通道) 的暗影。

eg：

drop-shadow(16px 16px 10px black)

2.5 css 伪元素

CSS 伪元素用于设置元素指定局部的款式。
::before 伪元素可用于在元素内容之前插入一些内容。
::after 伪元素可用于在元素内容之后插入一些内容。
::selection 伪元素匹配用户抉择的元素局部。

所有 CSS 伪元素：
| 选择器 | 例子 | 含意 |

::after p::after 在每个 p 元素之后插入内容
::before p::before 在每个 p 元素之前插入内容
::first-letter p:first-letter 抉择每个 p 元素的首字母
::first-line p::first-line 抉择每个 p 元素的首行
::selection p::selection 抉择用户抉择的元素局部

3. 实现步骤

3.1. 实现外层三个转动的圆

  • 假如有一个 div 标签，设置为圆，border 色彩进行辨别。
 .box {border: 2px solid var(--lineColor);
        border-left: 2px solid var(--color);
        border-right: 2px solid var(--color);
        border-radius: 50%;
  }
  • 利用伪元素，再实现两个大小不一的圆。
.box,
.box::after,
.box::before {border: 2px solid var(--lineColor);
    border-left: 2px solid var(--color);
    border-right: 2px solid var(--color);
    border-radius: 50%;
}
.box {
   width: 200px;
   height: 200px;
   position: relative;
 }
 .box::before {
     width: 180px;
     height: 180px;
     margin-top: -90px;
     margin-left: -90px;
 }
.box::after {
    width: 160px;
    height: 160px;
    margin-top: -80px;
    margin-left: -80px;
}
  • 为 div 增加 rotateZ 旋转动画，旋转 1 圈。
.box {
   animation: turn 1s linear infinite;
   transform-origin: 50% 50%;
}
@keyframes turn {
  100% {transform: rotateZ(-1turn);
   }
}
  • 重写 before 和 after 动画，使三个圆转动有肯定层次感。
.box::before {animation: turn2 1.25s linear infinite;}
.box::after {animation: turn 1.5s linear infinite;}
@keyframes turn2 {
    100% {transform: rotateZ(1turn);
    }
}

3.2 实现内层三个转动的圆

  • 三个 div 标签，设置为圆。
.box-circle,
.box-circle1,
.box-circle2 {border: 2px solid var(--color);
    opacity: .9;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: 50% 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
}
  • 别离增加同一个 rotate3d 旋转动画，设置肯定的动画延时。
.box-circle {animation-delay: 0.2s;}

.box-circle1 {animation-delay: 1.2s;}

.box-circle2 {animation-delay: 2.2s;}

@keyframes rotate {
 100% {
     border: none;
     border-top: 2px solid var(--color);
     border-bottom: 2px solid var(--color);
     transform: translate(-50%, -50%) rotate3d(.5, 0.5, 0.5, -720deg);
 }
}

3.3 实现两头转动的月牙

  • 一个伪元素，设置为圆，增加上边框 border-top，通过 drop-shadow 增强暗影成果。
section::before {
  content: '';
  position: absolute;
  height: 10px;
  width: 10px;
  border-radius: 100%;
  border-top: 1px solid orange;
  top: 50%;
  left: 50%;
  margin-top: -5px;
  margin-left: -5px;
  filter:
      drop-shadow(0 0 2px var(--color)) drop-shadow(0 0 5px var(--color)) drop-shadow(0 0 10px var(--color)) drop-shadow(0 0 20px var(--color));
}
  • 为其增加 rotataZ 旋转一圈的动画。
section::before {animation: turn 1s infinite linear;}

4. 残缺代码 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 圆弧转动 </title>
</head>
<link rel="stylesheet" href="../common.css">
<style>
    :root {
        --color: orange;
        --lineColor: rgba(102, 163, 224, .2);
    }
    body {
        background: #222;
        overflow: hidden;
    }
    section {
        position: relative;
        width: 200px;
        height: 200px;
    }
    section::before {
        content: '';
        position: absolute;
        height: 10px;
        width: 10px;
        border-radius: 100%;
        border-top: 1px solid orange;
        top: 50%;
        left: 50%;
        margin-top: -5px;
        margin-left: -5px;
        animation: turn 1s infinite linear;
        filter:
            drop-shadow(0 0 2px var(--color)) drop-shadow(0 0 5px var(--color)) drop-shadow(0 0 10px var(--color)) drop-shadow(0 0 20px var(--color));
    }
    .box,
    .box::after,
    .box::before {border: 2px solid var(--lineColor);
        border-left: 2px solid var(--color);
        border-right: 2px solid var(--color);
        border-radius: 50%;
    }
    .box::after,
    .box::before {
        position: absolute;
        content: '';
        left: 50%;
        top: 50%;
    }
    .box {
        width: 200px;
        height: 200px;
        position: relative;
        animation: turn 1s linear infinite;
        transform-origin: 50% 50%;
    }
    .box::before {
        width: 180px;
        height: 180px;
        margin-top: -90px;
        margin-left: -90px;
        animation: turn2 1.25s linear infinite;
    }
    .box::after {
        width: 160px;
        height: 160px;
        margin-top: -80px;
        margin-left: -80px;
        animation: turn 1.5s linear infinite;
    }
    .box-circle,
    .box-circle1,
    .box-circle2 {border: 2px solid var(--color);
        opacity: .9;
        border-radius: 50%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform-origin: 50% 50%;
        transform: translate(-50%, -50%);
        width: 100px;
        height: 100px;
        animation: rotate 3s linear infinite;
    }
    .box-circle {animation-delay: 0.2s;}
    .box-circle1 {animation-delay: 1.2s;}
    .box-circle2 {animation-delay: 2.2s;}
    @keyframes turn {
        100% {transform: rotateZ(-1turn);
        }
    }
    @keyframes turn2 {
        100% {transform: rotateZ(1turn);
        }
    }
    @keyframes rotate {
        100% {
            border: none;
            border-top: 2px solid var(--color);
            border-bottom: 2px solid var(--color);
            transform: translate(-50%, -50%) rotate3d(.5, 0.5, 0.5, -720deg);
        }
    }
</style>
<body>
    <section>
        <div class="box"></div>
        <div class="box-circle"></div>
        <div class="box-circle1"></div>
        <div class="box-circle2"></div>
    </section>
</body>

</html>
退出移动版