css制作旋转小球(css实现毛毛虫爬行动作)
类别:Web前端 浏览量:2438
时间:2022-01-28 01:09:27 css制作旋转小球
css实现毛毛虫爬行动作毛毛虫儿时大家都有见过,今天想起来写一个爬行的动作,具体代码如下所示:
html代码:
<li class='container'> <li class='hide left'></li> <li class='hide right'></li> <li class='hide bottom'></li> <li class='circle-container'> <li class='circle'></li> </li> </li>
css代码:
<style> body { background-color: #1B6CB2; margin: 0; } .container { position: absolute; width: 600px; height: 400px; overflow: hidden; top: 50%; left: 60%; transform: translate(-50%, -50%); } .hide { height: 100%; width: 150px; background: #1B6CB2; position: absolute; z-index: 2; } .hide.left { left: 0; } .hide.right { right: 0; } .hide.bottom { bottom: 0; width: 100%; height: 50%; } .circle { position: absolute; height: 75px; width: 150px; border: 3px solid white; border-radius: 50%/100% 100% 0 0; border-bottom: none; top: 40%; left: 50%; transform-origin: 0% 50%; transform: translate(-50%, -50%); animation: magic 1.8s ease infinite; } @keyframes magic { 0% { transform: rotate(-170deg) translate(-50%, -50%); } 50% { transform: rotate(0deg) translate(-50%, -50%); } 100% { transform: rotate(180deg) translate(-50%, -50%); } } .circle-container { position: absolute; height: 75px; width: 150px; top: 40%; left: 50%; transform-origin: 0% 50%; transform: translate(-50%, -50%); animation: power 1.8s ease-out infinite; } @keyframes power { 0% { margin-left: 20px; } 50% { margin-left: -55px; } 99.9% { margin-left: -130px; } 100% { margin-left: 20px; } } </style>
总结
以上所述是小编给大家介绍的css实现毛毛虫爬行动作,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持!
热门推荐
- vue和springboot实战项目(vue+spring boot实现校验码功能)
- mysql常用四种日志(MySQL 撤销日志与重做日志Undo Log与Redo Log相关总结)
- phpzip压缩原理(PHP生成zip压缩包的常用方法示例)
- html怎么引入sass(利用CSS的Sass预处理器框架来制作居中效果)
- yii数据库测评(Yii2.0框架behaviors方法使用实例分析)
- sqlparameter的用法介绍
- 开发者微信公众号开发流程(微信公众平台开发教程⑥ 微信开发集成类的使用图文详解)
- zabbix客户端看什么网络监控数据(分布式监控系统之Zabbix主动、被动及web监控的过程详解)
- html5发送文字特效(HTML5调用手机发短信和打电话功能)
- js网站前端效果(JS如何让你的移动端交互体验更加优秀)