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

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>