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

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

代碼解讀

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

設(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;

}

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

.body{

animation:

bounce1sinfinitealternate;

}

@keyframesbounce{

to{

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

}

}

讓怪獸的身體轉(zhuǎn)動起來：

@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);

}

}

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