Shulou(Shulou.com)06/01 Report--

小编给大家分享一下怎么用纯CSS实现徘徊的果冻怪兽，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧!

代码解读

定义dom，容器中包含2个元素，分别代表怪兽的身体和眼睛：

设置背景色：

body{

margin:0;

height:100vh;

background-color:black;

}

设置前景色：

.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;

}

为怪兽定义轻轻跳起的动画，结合后面的动画效果，让它具有果冻的弹性：

.body{

animation:

bounce1sinfinitealternate;

}

@keyframesbounce{

to{

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

}

}

让怪兽的身体转动起来：

@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实现徘徊的果冻怪兽"有了一定的了解，如果想了解更多相关知识，欢迎关注行业资讯频道，感谢各位的阅读!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.