css实现炫酷的圆环相交转动动画

1.实现效果

2.实现原理

CSS perspective 属性：属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
perspective 属性只影响 3D 转换元素。（请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。）

perspective: number（元素距离视图的距离，以像素计。）|none（默认值。与 0 相同。不设置透视。）

transform-style:让转换的子元素保留3D转换。指定嵌套元素是怎样在三维空间中呈现，使用此属性必须先使用 transform 属性.。

transform-style: flat（表示所有子元素在2D平面呈现）|preserve-3d（表示所有子元素在3D空间中呈现）;

pointer-events ：设置元素是否对鼠标事件做出反应。

pointer-events: auto|none;
/* 属性值 */
pointer-events: auto;//默认值，设置该属性链接可以正常点击访问
pointer-events: none;//元素不能对鼠标事件做出反应
pointer-events: visiblePainted; /* 只适用于 SVG */
pointer-events: visibleFill;    /* 只适用于 SVG */
pointer-events: visibleStroke;  /* 只适用于 SVG */
pointer-events: visible;        /* 只适用于 SVG */
pointer-events: painted;        /* 只适用于 SVG */
pointer-events: fill;           /* 只适用于 SVG */
pointer-events: stroke;         /* 只适用于 SVG */
pointer-events: all;            /* 只适用于 SVG */
/* 全局值 */
pointer-events: inherit;//从父元素继承该属性
pointer-events: initial;//initial 关键字用于设置 CSS 属性为它的默认值
pointer-events: unset;//

animation-delay：定义动画何时开始。
允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。

animation-delay: -2s /* W3C 和 Opera */
-moz-animation-delay: -2s /* Firefox */
-webkit-animation-delay: -2s /* Safari 和 Chrome */

3.实现步骤

3.1图例demo1

• 画出三个半圆弧（只设置border-bottom）

.loading {
    position: relative;
    width: 8rem;
    height: 8rem;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 40rem;
    perspective: 40rem;
    pointer-events: none;
    margin-bottom: 40px;
}

.loading .line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border-bottom: 0.15rem solid var(--color);
}

• 为每个圆弧设置transform进行一定角度的旋转
• [x] 圆弧1：

.loading .line:first-child {
    -webkit-animation: rotate1 1.15s linear infinite;
    animation: rotate1 1.15s linear infinite;
}
.loading .line:first-child {
    -webkit-animation-delay: -.8s;
    animation-delay: -.8s;
}
@keyframes rotate1 {
    0% {
        -webkit-transform: rotateX(35deg) rotateY(-45deg) rotate(0);
        transform: rotateX(35deg) rotateY(-45deg) rotate(0)
    }
    to {
        -webkit-transform: rotateX(35deg) rotateY(-45deg) rotate(1turn);
        transform: rotateX(35deg) rotateY(-45deg) rotate(1turn)
    }
}

• [x] 圆弧2：
  

.loading .line:nth-child(2) {
    -webkit-animation: rotate2 1.15s linear infinite;
    animation: rotate2 1.15s linear infinite
}
.loading .line:nth-child(2) {
    -webkit-animation-delay: -.4s;
    animation-delay: -.4s
}
@keyframes rotate2 {
    0% {
        -webkit-transform: rotateX(50deg) rotateY(10deg) rotate(0);
        transform: rotateX(50deg) rotateY(10deg) rotate(0)
    }

    to {
        -webkit-transform: rotateX(50deg) rotateY(10deg) rotate(1turn);
        transform: rotateX(50deg) rotateY(10deg) rotate(1turn)
    }
}

• [x] 圆弧3：
  

.loading .line:nth-child(3) {
    -webkit-animation: rotate3 1.15s linear infinite;
    animation: rotate3 1.15s linear infinite
}
.loading .line:nth-child(3) {
    -webkit-animation-delay: 0s;
    animation-delay: 0s
}
@-webkit-keyframes rotate3 {
    0% {
        -webkit-transform: rotateX(35deg) rotateY(55deg) rotate(0);
        transform: rotateX(35deg) rotateY(55deg) rotate(0)
    }

    to {
        -webkit-transform: rotateX(35deg) rotateY(55deg) rotate(1turn);
        transform: rotateX(35deg) rotateY(55deg) rotate(1turn)
    }
}

3.2图例demo2

• 画出两个半圆弧（border-bottom+border-top）

.loading2 .line2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border-bottom: 0.1rem solid var(--color);
    border-top: 0.1rem solid var(--color);
}

• 为每个圆弧设置transform进行一定角度的旋转

  • [x] 圆弧1：

.loading2 .line2:nth-child(2) {
    -webkit-animation: rotate5 1.15s linear infinite;
    animation: rotate5 1.15s linear infinite
}
@keyframes rotate4 {
    0% {
        -webkit-transform: rotateX(55deg) rotateY(-30deg) rotate(0);
        transform: rotateX(55deg) rotateY(-30deg) rotate(0)
    }
    
    to {
        -webkit-transform: rotateX(55deg) rotateY(-30deg) rotate(1turn);
        transform: rotateX(55deg) rotateY(-30deg) rotate(1turn)
    }
}

• [x] 圆弧2:

.loading2 .line2:nth-child(2) {
    -webkit-animation: rotate5 1.15s linear infinite;
    animation: rotate5 1.15s linear infinite
}
@keyframes rotate5 {
    0% {
        -webkit-transform: rotateX(55deg) rotateY(30deg) rotate(0);
        transform: rotateX(55deg) rotateY(30deg) rotate(0)
    }

    to {
        -webkit-transform: rotateX(55deg) rotateY(30deg) rotate(1turn);
        transform: rotateX(55deg) rotateY(30deg) rotate(1turn)
    }
}

4.完整代码