How to use pure CSS to realize the wandering jelly monster
小编给大家分享一下怎么用纯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实现徘徊的果冻怪兽"有了一定的了解，如果想了解更多相关知识，欢迎关注行业资讯频道，感谢各位的阅读!
