您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)使用純CSS實(shí)現(xiàn)寶路薄荷糖的動畫的方法的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個參考。一起跟隨小編過來看看吧。
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 個像寶路薄荷糖狀的黑色圓環(huán):
.spinner::before { content: ''; position: absolute; box-sizing: border-box; width: inherit; height: inherit; border: 12.5vmin solid; border-radius: 50%; }
接下來制作動畫效果。
設(shè)置透視景深:
body { perspective: 400px; }
讓圓環(huán)在 z 軸上運(yùn)動:
.spinner::before { animation: spin 1.5s ease-in-out infinite both reverse; } @keyframes spin { 0%, 100% { transform: translateZ(10vmin); } 60% { transform: translateZ(-10vmin); } }
讓圓環(huán)在 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
偽元素再畫出一個白色的圓環(huán),并且讓它的動畫延遲動畫總長的一半時間:
.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 軸旋轉(zhuǎn)的動畫效果,動畫時間為子元素動畫時間的2倍:
.spinner { animation: wobble 3s ease-in-out infinite; } @keyframes wobble { 0%, 100% { transform: rotateX(15deg); } 50% { transform: rotateX(60deg); } }
增加容器沿 y 軸旋轉(zhuǎn)的動畫效果:
@keyframes wobble { 0%, 100% { transform: rotateX(15deg) rotateY(60deg); } 50% { transform: rotateX(60deg) rotateY(-60deg); } }
增加容器整體旋轉(zhuǎn)的動畫效果:
@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 空間上運(yùn)動:
.spinner { transform-style: preserve-3d; }
感謝各位的閱讀!關(guān)于使用純CSS實(shí)現(xiàn)寶路薄荷糖的動畫的方法就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。