1.實(shí)現(xiàn)效果
2.實(shí)現(xiàn)原理
2.1 rotate3d
rotate3d：rotate3d() CSS 函數(shù)定義一個(gè)變換，它將元素圍繞固定軸移動(dòng)而不使其變形。運(yùn)動(dòng)量由指定的角度定義; 如果為正，運(yùn)動(dòng)將為順時(shí)針，如果為負(fù)，則為逆時(shí)針。
語法：
rotate3d(x, y, z, a)
含義：
x 類型，可以是 0 到 1 之間的數(shù)值，表示旋轉(zhuǎn)軸 X 坐標(biāo)方向的矢量。
y 類型，可以是 0 到 1 之間的數(shù)值，表示旋轉(zhuǎn)軸 Y 坐標(biāo)方向的矢量。
z 類型，可以是 0 到 1 之間的數(shù)值，表示旋轉(zhuǎn)軸 Z 坐標(biāo)方向的矢量。
a 類型，表示旋轉(zhuǎn)角度。正的角度值表示順時(shí)針旋轉(zhuǎn)，負(fù)值表示逆時(shí)針旋轉(zhuǎn)。
2.2 rotateZ
rotateZ：函數(shù)定義了一個(gè)轉(zhuǎn)換，它可以讓一個(gè)元素圍繞橫 Z 軸旋轉(zhuǎn)，而不會(huì)對其進(jìn)行變形。旋轉(zhuǎn)軸圍繞原點(diǎn)旋轉(zhuǎn)，而這個(gè)原點(diǎn)通過transform-origin 屬性來定義（默認(rèn)的轉(zhuǎn)換原點(diǎn)是 center）。
rotateZ(a) 相當(dāng)于 rotate(a) or rotate3d(0, 0, 1, a)。
語法
rotateZ(a)
含義：
rotateZ() 引起的旋轉(zhuǎn)量由指定。如果為正，則順時(shí)針方向移動(dòng)；如果為負(fù)，則逆時(shí)針方向移動(dòng)。
a 是一個(gè)‘a(chǎn)ngle ’，表示旋轉(zhuǎn)的角度。正數(shù)角度表示順時(shí)針旋轉(zhuǎn)，負(fù)數(shù)則表示逆時(shí)針旋轉(zhuǎn)。
1turn：一圈，即360deg。90deg = 0.25turn。
2.3 transform-origin
transform-origin:更改一個(gè)元素變形的原點(diǎn),默認(rèn)的轉(zhuǎn)換原點(diǎn)是 center。
語法：
transform-origin: center;
含義：
transform-origin屬性可以使用一個(gè)，兩個(gè)或三個(gè)值來指定，其中每個(gè)值都表示一個(gè)偏移量。沒有明確定義的偏移將重置為其對應(yīng)的初始值。
如果定義了兩個(gè)或更多值并且沒有值的關(guān)鍵字，或者唯一使用的關(guān)鍵字是center，則第一個(gè)值表示水平偏移量，第二個(gè)值表示垂直偏移量。
關(guān)鍵字是方便的簡寫方法，等同于以下角度值：
| keyword | value |
|---|---|
| left | 0% |
| center | 50% |
| right | 100% |
| top | 0% |
| bottom | 100% |
2.4 CSS 濾鏡 filter 的drop-shadow
drop-shadow：投影實(shí)際上是輸入圖像的 alpha 蒙版的一個(gè)模糊的、偏移的版本，用特定的顏色繪制并合成在圖像下面。
函數(shù)接受shadow(在CSS3背景中定義)類型的值，除了"inset"關(guān)鍵字是不允許的。該函數(shù)與已有的box-shadow 屬性很相似；不同之處在于，通過濾鏡，一些瀏覽器為了更好的性能會(huì)提供硬件加速。
語法：
drop-shadow(offset-x offset-y blur-radius spread-radius color)
含義：
offset-x offset-y (必須)：
offset-x指定水平距離，其中負(fù)值將陰影放置到元素的左側(cè)。offset-y指定垂直距離，其中負(fù)值將陰影置于元素之上。如果兩個(gè)值都為 0，則陰影直接放置在元素后面。
blur-radius (可選) ：
陰影的模糊半徑，指定為 。值越大，陰影就越大，也越模糊。如果未指定，則默認(rèn)為
0，從而產(chǎn)生清晰、不模糊的邊緣。不允許有負(fù)值。
spread-radius (可選)：
陰影的擴(kuò)展半徑，指定為 .
正的值會(huì)導(dǎo)致陰影擴(kuò)大和變大，而負(fù)的值會(huì)導(dǎo)致陰影縮小。如果未指定，則默認(rèn)為 0，陰影的大小將與輸入圖像相同。
color (可選)：
陰影的顏色，指定為 color。如果未指定，則使用 color 屬性的值。如果顏色值省略，WebKit中陰影是透明的。
注意：box-shadow 屬性在元素的整個(gè)框后面創(chuàng)建一個(gè)矩形陰影，而 drop-shadow() 過濾器則是創(chuàng)建一個(gè)符合圖像本身形狀 (alpha 通道) 的陰影。
eg：
drop-shadow(16px 16px 10px black)
2.5 css偽元素
CSS 偽元素用于設(shè)置元素指定部分的樣式。
::before 偽元素可用于在元素內(nèi)容之前插入一些內(nèi)容。
::after 偽元素可用于在元素內(nèi)容之后插入一些內(nèi)容。
::selection 偽元素匹配用戶選擇的元素部分。
所有 CSS 偽元素：
| 選擇器 | 例子 | 含義 |
|---|---|---|
| ::after | p::after | 在每個(gè) p 元素之后插入內(nèi)容 |
| ::before | p::before | 在每個(gè) p 元素之前插入內(nèi)容 |
| ::first-letter | p:first-letter | 選擇每個(gè)p 元素的首字母 |
| ::first-line | p::first-line | 選擇每個(gè) p 元素的首行 |
| ::selection | p::selection | 選擇用戶選擇的元素部分 |
3.實(shí)現(xiàn)步驟
3.1.實(shí)現(xiàn)外層三個(gè)轉(zhuǎn)動(dòng)的圓
- 假設(shè)有一個(gè)div標(biāo)簽，設(shè)置為圓，border顏色進(jìn)行區(qū)分。
.box {
border: 2px solid var(--lineColor);
border-left: 2px solid var(--color);
border-right: 2px solid var(--color);
border-radius: 50%;
}
- 利用偽元素，再實(shí)現(xiàn)兩個(gè)大小不一的圓。
.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旋轉(zhuǎn)動(dòng)畫，旋轉(zhuǎn)1圈。
文章來源：http://www.zghlxwxcb.cn/news/detail-782893.html
.box {
animation: turn 1s linear infinite;
transform-origin: 50% 50%;
}
@keyframes turn {
100% {
transform: rotateZ(-1turn);
}
}
- 重寫before和after動(dòng)畫，使三個(gè)圓轉(zhuǎn)動(dòng)有一定層次感。
.box::before {
animation: turn2 1.25s linear infinite;
}
.box::after {
animation: turn 1.5s linear infinite;
}
@keyframes turn2 {
100% {
transform: rotateZ(1turn);
}
}
3.2 實(shí)現(xiàn)內(nèi)層三個(gè)轉(zhuǎn)動(dòng)的圓
- 三個(gè)div標(biāo)簽，設(shè)置為圓。
.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;
}
- 分別添加同一個(gè)rotate3d旋轉(zhuǎn)動(dòng)畫，設(shè)置一定的動(dòng)畫延時(shí)。
.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 實(shí)現(xiàn)中間轉(zhuǎn)動(dòng)的月牙
- 一個(gè)偽元素，設(shè)置為圓，添加上邊框 border-top，通過drop-shadow加強(qiáng)陰影效果。
文章來源地址http://www.zghlxwxcb.cn/news/detail-782893.html
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旋轉(zhuǎn)一圈的動(dòng)畫。
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>圓弧轉(zhuǎn)動(dòng)</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>
5.更多css相關(guān)，盡在蘇蘇的碼云如果對你有幫助，歡迎你的star+訂閱！
到了這里，關(guān)于css的rotate3d實(shí)現(xiàn)炫酷的圓環(huán)轉(zhuǎn)動(dòng)動(dòng)畫的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
