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

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

代碼解讀

定義dom，只有1個(gè)元素：

<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個(gè)像寶路薄荷糖狀的黑色圓環(huán)：

.spinner::before{

content:'';

position:absolute;

box-sizing:border-box;

width:inherit;

height:inherit;

border:12.5vminsolid;

border-radius:50%;

}

接下來(lái)制作動(dòng)畫效果。

設(shè)置透視景深：

body{

perspective:400px;

}

讓圓環(huán)在z軸上運(yùn)動(dòng)：

.spinner::before{

animation:spin1.5sease-in-outinfinitebothreverse;

}

@keyframesspin{

0%,100%{

transform:translateZ(10vmin);

}

60%{

transform:translateZ(-10vmin);

}

}

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

@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偽元素再畫出一個(gè)白色的圓環(huán)，并且讓它的動(dòng)畫延遲動(dòng)畫總長(zhǎng)的一半時(shí)間：

.spinner::before,

.spinner::after{

/*略*/

animation:spin1.5sease-in-outinfinitebothreverse;

}

.spinner::after{

border-color:white;

animation-delay:-0.75s;

}

接下來(lái)制作容器的動(dòng)畫效果，為了不受子元素動(dòng)畫的影響，先暫時(shí)屏蔽偽元素的動(dòng)畫效果。

.spinner::before,

.spinner::after{

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

}

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

.spinner{

animation:wobble3sease-in-outinfinite;

}

@keyframeswobble{

0%,100%{

transform:rotateX(15deg);

}

50%{

transform:rotateX(60deg);

}

}

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

@keyframeswobble{

0%,100%{

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

}

50%{

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

}

}

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

@keyframeswobble{

0%,100%{

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

}

50%{

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

}

}

打開(kāi)子元素的動(dòng)畫效果，使子元素的動(dòng)畫效果和容器的動(dòng)畫效果疊加：

.spinner::before,

.spinner::after{

animation:spin1.5sease-in-outinfinitebothreverse;

}

最后，使子元素在3d空間上運(yùn)動(dòng)：

.spinner{

transform-style:preserve-3d;

}

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

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

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

廣告

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