DDR爱好者之家 Design By 杰米
毛毛虫儿时大家都有见过,今天想起来写一个爬行的动作,具体代码如下所示:
html代码:
<div class='container'> <div class='hide left'></div> <div class='hide right'></div> <div class='hide bottom'></div> <div class='circle-container'> <div class='circle'></div> </div> </div>
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实现毛毛虫爬行动作,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年05月29日
2024年05月29日
- 郑伊健1995-EARTH[香港][WAV+CUE]
- 梁汉文《不愿一个人》华星40金唱片[WAV分轨]
- 李宗盛《李宗盛精选滚石香港黄金十年》[WAV/分轨][670MB]
- 群星 模拟之声慢刻CD《发烧宝丽金35周年》[WAV+CUE][640MB]
- 《古惑仔系列电影合集1996-1998》[FLAC/分轨][780MB]
- 鸣潮自选4星武器推荐攻略 4星自选武器哪个最好
- 鸣潮自选5星武器怎么获取 五星自选武器哪个最好
- 鸣潮联觉等级怎么提升 联觉等级升级攻略
- 甄妮《皆因你的爱》华星40金唱片[WAV分轨]
- 陈奕迅《时代曲》华星40金唱片)[WAV分轨]
- 蔡依林《2004BornToBeAStar(超级珍藏世纪精选2CD)》[WAV整轨]
- 《碧海黑帆》新赛季预告公布 又有免费试玩生怕你不玩
- 刘德华《天王巨星经典情歌典藏2CD》[WAV+CUE][1.3GB]
- 斯琴格日乐《强烈直接的音乐方式 姿态》[WAV+CUE][500MB]
- 王菲《收录12首 只爱陌生人》[WAV+CUE][540MB]