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

小编给大家分享一下怎么用纯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实现徘徊的果冻怪兽”有了一定的了解，如果想了解更多相关知识，欢迎关注云技术行业资讯频道，感谢各位的阅读！

相关推荐: Serverless开发实战中Todo是怎样的

这篇文章将为大家详细讲解有关Serverless开发实战中Todo是怎样的，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。前面将云函数与 Express 进行整合后，接下来我们通过案例的方式继续学习云函数的使用开…