怎么用純CSS實(shí)現(xiàn)徘徊的果凍怪獸

小編給大家分享一下怎么用純CSS實(shí)現(xiàn)徘徊的果凍怪獸，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)公司主要從事成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)蠡縣,十年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):028-86922220

代碼解讀

定義dom，容器中包含2個(gè)元素，分別代表怪獸的身體和眼睛：

<pclass="monster">

<spanclass="body"></span>

<spanclass="eyes"></span>

</p>

設(shè)置背景色：

body{

margin:0;

height:100vh;

background-color:black;

}

設(shè)置前景色：

.monster{

width:100vw;

height:50vh;

background-color:lightcyan;

}

畫出怪獸的身體：

.monster{

position:relative;

}

.body{

position:absolute;

width:32vmin;

height:32vmin;

background-color:teal;

border-radius:43%40%43%40%;

bottom:calc(-1*32vmin/2-4vmin);

}

定義怪獸眼睛所在的容器：

.eyes{

width:24vmin;

height:5vmin;

position:absolute;

bottom:2vmin;

left:calc(32vmin-24vmin-2vmin);

}

用偽元素畫出怪獸的眼睛：

.eyes::before,

.eyes::after{

content:'';

position:absolute;

width:5vmin;

height:5vmin;

border:1.25vminsolidwhite;

box-sizing:border-box;

border-radius:50%;

}

.eyes::before{

left:4vmin;

}

.eyes::after{

right:4vmin;

}

為怪獸定義輕輕跳起的動(dòng)畫，結(jié)合后面的動(dòng)畫效果，讓它具有果凍的彈性：

.body{

animation:

bounce1sinfinitealternate;

}

@keyframesbounce{

to{

bottom:calc(-1*32vmin/2-2vmin);

}

}

讓怪獸的身體轉(zhuǎn)動(dòng)起來(lái)：

@keyframeswave{

to{

transform:rotate(360deg);

}

}

讓怪獸徘徊行走：

.monster{

overflow:hidden;

}

.body{

left:-2vmin;

animation:

wander5slinearinfinitealternate,

wave3slinearinfinite,

bounce1sinfinitealternate;

}

.eyes{

animation:wander5slinearinfinitealternate;

}

@keyframeswander{

to{

left:calc(100%-32vmin+2vmin);

}

}

最后，讓怪獸的眼睛眨一眨：

.eyes::before,

.eyes::after{

animation:blink3sinfinitelinear;

}

@keyframesblink{

4%,10%,34%,40%{

transform:scaleY(1);

}

7%,37%{

transform:scaleY(0);

}

}

看完了這篇文章，相信你對(duì)“怎么用純CSS實(shí)現(xiàn)徘徊的果凍怪獸”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

本文題目：怎么用純CSS實(shí)現(xiàn)徘徊的果凍怪獸
文章URL：http://bm7419.com/article2/pciiic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷推廣、軟件開發(fā)、網(wǎng)站收錄、Google、企業(yè)建站、域名注冊(cè)

廣告

聲明：本網(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)