web前端|css教程
动画,css3,css,html5,前端
web前端-css教程
本篇文章给大家带来的内容是关于如何使用纯CSS实现徘徊的果冻怪兽，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
红色源码,vscode如何添加用户,ubuntu 光标跳动,tomcat8.5.14,sqlite数据库丢失,如何根除花盆中的蚂蚁爬虫,php过滤关键字,伦敦seo优化技术,视频网站的播放器代码,swf网页音乐播放器,6v电影网站 模板lzw
效果预览
开发在线系统源码,安装ubuntu20.4,tomcat安装出现问题,python电脑爬虫,目前php哪个版本好,附子SEO实战lzw
h5登录注册源码,vscode拖控件生成代码,ubuntu安装haxm,实时输出tomcat日志,大型爬虫node,php是最好的语言段子,咸宁seo关键词推广,淘宝刷单源码网站,宠物网店模板lzw
源代码下载
/comehope/front-end-daily-challenges
代码解读
定义 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.25vmin solid white; box-sizing: border-box; border-radius: 50%;}.eyes::before { left: 4vmin;}.eyes::after { right: 4vmin;}
为怪兽定义轻轻跳起的动画，结合后面的动画效果，让它具有果冻的弹性：
.body { animation: bounce 1s infinite alternate;}@keyframes bounce { to { bottom: calc(-1 * 32vmin / 2 - 2vmin); }}
让怪兽的身体转动起来：
@keyframes wave { to { transform: rotate(360deg); }}
让怪兽徘徊行走：
.monster { overflow: hidden;}.body { left: -2vmin; animation: wander 5s linear infinite alternate, wave 3s linear infinite, bounce 1s infinite alternate;}.eyes { animation: wander 5s linear infinite alternate;}@keyframes wander { to { left: calc(100% - 32vmin + 2vmin); }}
最后，让怪兽的眼睛眨一眨：
.eyes::before,.eyes::after { animation: blink 3s infinite linear;}@keyframes blink { 4%, 10%, 34%, 40% { transform: scaleY(1); } 7%, 37% { transform: scaleY(0); }}
大功告成！
如何使用纯CSS实现一个人独自行走的动画效果（附源码）
如何使用纯CSS实现一只纸鹤（附源码）
