怎么用纯CSS实现徘徊的果冻怪兽

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

　　代码解读

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

　　<pclass="monster">

　　<spanclass="body"></span>

　　<spanclass="eyes"></span>

　　</p>

　　设置背景色：

　　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实现徘徊的果冻怪兽”有了一定的了解，如果想了解更多相关知识，欢迎关注编程网JavaScript频道，感谢各位的阅读！