时间:2021-05-08
毛毛虫儿时大家都有见过,今天想起来写一个爬行的动作,具体代码如下所示:
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实现毛毛虫爬行动作,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
sai中想要画一幅画,该怎么画毛毛虫和树叶呢?下面我们就来看看详细的教程。软件名称:EasyPaintToolSAI专业级的CG绘画工具v1.3.0汉化安装版软
一、推迟执行动作可以使用timer+map方法实现.代码如下:Observable.timer(5,TimeUnit.MILLISECONDS).map(val
养常规宠物的在我看来是些中产阶级的生活追求,想要找个宠物陪伴。我和他们是完全不一样的圈子,我养了十几年爬行动物,像蟒、蛇。爬行动物养的是景,就是放在屋里的能动的
营销型网站一切的努力,都是为了说服用户采取行动,最终实现网站目标。而这些行动可能是由一连串的交互动作来完成的。没有什么比由于网站本身设计的问题,导致采取行动的用
首先,使用div+css设计的网站有助于提升搜索引擎spider提升爬行效率。div+css的代码精简是table无法比拟的,即使div+css的HTML加上对