本篇內(nèi)容介紹了“怎么使用純CSS實現(xiàn)寶路薄荷糖的動畫”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

公司主營業(yè)務(wù)：網(wǎng)站設(shè)計、成都做網(wǎng)站、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)公司推出桃城免費做網(wǎng)站回饋大家。

代碼解讀

定義dom，只有1個元素：

<divclass="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.5vminsolid;

border-radius:50%;

}

接下來制作動畫效果。

設(shè)置透視景深：

body{

perspective:400px;

}

讓圓環(huán)在z軸上運動：

.spinner::before{

animation:spin1.5sease-in-outinfinitebothreverse;

}

@keyframesspin{

0%,100%{

transform:translateZ(10vmin);

}

60%{

transform:translateZ(-10vmin);

}

}

讓圓環(huán)在z軸距離較大時稍稍傾斜：

@keyframesspin{

0%,100%{

transform:translateZ(10vmin)rotateX(25deg);

}

60%{

transform:translateZ(-10vmin);

}

}

增加縮放效果：

@keyframesspin{

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:spin1.5sease-in-outinfinitebothreverse;

}

.spinner::after{

border-color:white;

animation-delay:-0.75s;

}

接下來制作容器的動畫效果，為了不受子元素動畫的影響，先暫時屏蔽偽元素的動畫效果。

.spinner::before,

.spinner::after{

/*animation:spin1.5sease-in-outinfinitebothreverse;*/

}

增加容器沿x軸旋轉(zhuǎn)的動畫效果，動畫時間為子元素動畫時間的2倍：

.spinner{

animation:wobble3sease-in-outinfinite;

}

@keyframeswobble{

0%,100%{

transform:rotateX(15deg);

}

50%{

transform:rotateX(60deg);

}

}

增加容器沿y軸旋轉(zhuǎn)的動畫效果：

@keyframeswobble{

0%,100%{

transform:rotateX(15deg)rotateY(60deg);

}

50%{

transform:rotateX(60deg)rotateY(-60deg);

}

}

增加容器整體旋轉(zhuǎn)的動畫效果：

@keyframeswobble{

0%,100%{

transform:rotateX(15deg)rotateY(60deg);

}

50%{

transform:rotateX(60deg)rotateY(-60deg)rotate(180deg);

}

}

打開子元素的動畫效果，使子元素的動畫效果和容器的動畫效果疊加：

.spinner::before,

.spinner::after{

animation:spin1.5sease-in-outinfinitebothreverse;

}

最后，使子元素在3d空間上運動：

.spinner{

transform-style:preserve-3d;

}

“怎么使用純CSS實現(xiàn)寶路薄荷糖的動畫”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

當前題目：怎么使用純CSS實現(xiàn)寶路薄荷糖的動畫
網(wǎng)站鏈接：http://aaarwkj.com/article42/ihhohc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、標簽優(yōu)化、小程序開發(fā)、App開發(fā)、虛擬主機、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)