效果預覽
按下右側的“點擊預覽”按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。
https://codepen.io/comehope/pen/oagrvz
可交互視頻
此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。
請用 chrome, safari, edge 打開觀看。
https://scrimba.com/p/pEgDAM/cRbqJcD
源代碼下載
每日前端實戰系列的全部源代碼請從 github 下載:
https://github.com/comehope/front-end-daily-challenges
代碼解讀
定義 dom,只有 1 個元素:
<div class="spinner"></div>
居中顯示:
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: silver;
}
定義容器尺寸:
.spinner {
width: 50vmin;
height: 50vmin;
position: relative;
}
用 before
僞元素畫出 1 個像寶路薄荷糖狀的黑色圓環:
.spinner::before {
content: '';
position: absolute;
box-sizing: border-box;
width: inherit;
height: inherit;
border: 12.5vmin solid;
border-radius: 50%;
}
接下來製作動畫效果。
設置透視景深:
body {
perspective: 400px;
}
讓圓環在 z 軸上運動:
.spinner::before {
animation: spin 1.5s ease-in-out infinite both reverse;
}
@keyframes spin {
0%, 100% {
transform: translateZ(10vmin);
}
60% {
transform: translateZ(-10vmin);
}
}
讓圓環在 z 軸距離較大時稍稍傾斜:
@keyframes spin {
0%, 100% {
transform: translateZ(10vmin) rotateX(25deg);
}
60% {
transform: translateZ(-10vmin);
}
}
增加縮放效果:
@keyframes spin {
0%, 100% {
transform: translateZ(10vmin) rotateX(25deg);
}
33% {
transform: translateZ(-10vmin) scale(0.4);
}
60% {
transform: translateZ(-10vmin);
}
}
用 after
僞元素再畫出一個白色的圓環,並且讓它的動畫延遲動畫總長的一半時間:
.spinner::before,
.spinner::after {
/*略*/
animation: spin 1.5s ease-in-out infinite both reverse;
}
.spinner::after {
border-color: white;
animation-delay: -0.75s;
}
接下來製作容器的動畫效果,爲了不受子元素動畫的影響,先暫時屏蔽僞元素的動畫效果。
.spinner::before,
.spinner::after {
/* animation: spin 1.5s ease-in-out infinite both reverse; */
}
增加容器沿 x 軸旋轉的動畫效果,動畫時間爲子元素動畫時間的2倍:
.spinner {
animation: wobble 3s ease-in-out infinite;
}
@keyframes wobble {
0%, 100% {
transform: rotateX(15deg);
}
50% {
transform: rotateX(60deg);
}
}
增加容器沿 y 軸旋轉的動畫效果:
@keyframes wobble {
0%, 100% {
transform: rotateX(15deg) rotateY(60deg);
}
50% {
transform: rotateX(60deg) rotateY(-60deg);
}
}
增加容器整體旋轉的動畫效果:
@keyframes wobble {
0%, 100% {
transform: rotateX(15deg) rotateY(60deg);
}
50% {
transform: rotateX(60deg) rotateY(-60deg) rotate(180deg);
}
}
打開子元素的動畫效果,使子元素的動畫效果和容器的動畫效果疊加:
.spinner::before,
.spinner::after {
animation: spin 1.5s ease-in-out infinite both reverse;
}
最後,使子元素在 3d 空間上運動:
.spinner {
transform-style: preserve-3d;
}
大功告成!