css實現炫酷的圓環相交轉動動畫詳情 - 前端,css3動畫用户bPcSPjP 動態日志

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);
}

<div class="loading">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
</div>

為每個圓弧設置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）

在這裏插入圖片描述

<div class="loading loading2">
    <div class="line2"></div>
    <div class="line2"></div>
</div>

.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.完整代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <link rel="stylesheet" type="text/css" href="../common.css" />
    <style type="text/css">
        body {
            background: #222;
            overflow: hidden;
        }

        :root {
            --color: rgba(255, 165, 0, 1);
        }

        .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);
        }


        .loading .line:first-child {
            -webkit-animation: rotate1 1.15s linear infinite;
            animation: rotate1 1.15s linear infinite;
        }


        .loading .line:nth-child(2) {
            -webkit-animation: rotate2 1.15s linear infinite;
            animation: rotate2 1.15s linear infinite
        }

        .loading .line:nth-child(3) {
            -webkit-animation: rotate3 1.15s linear infinite;
            animation: rotate3 1.15s linear infinite
        }

        .loading .line:first-child {
            -webkit-animation-delay: -.8s;
            animation-delay: -.8s;
        }


        .loading .line:nth-child(2) {
            -webkit-animation-delay: -.4s;
            animation-delay: -.4s
        }

        .loading .line:nth-child(3) {
            -webkit-animation-delay: 0s;
            animation-delay: 0s
        }


        @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)
            }
        }

        @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)
            }
        }

        @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)
            }
        }

        /* 第二個 */
        .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);
        }

        .loading2 .line2:first-child {
            -webkit-animation: rotate4 1.15s linear infinite;
            animation: rotate4 1.15s linear infinite;
        }

        .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)
            }
        }

        @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)
            }
        }
    </style>
    <body>
        <section>
            <div class="loading">
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
            </div>
            <div class="loading loading2">
                <div class="line2"></div>
                <div class="line2"></div>
            </div>
        </section>
    </body>
</html>