用CSS怎样loading吃豆人的效果,方法是什么?
发布时间:2022-04-11 16:52:06 所属栏目:语言 来源:互联网
导读:这篇文章给大家分享一个loading动画示例,是一个吃豆人的效果。小编觉得挺有趣的,因此分享给大家做个参考,文中的示例代码介绍得很详细,有需要的朋友可以参考,接下来就跟随小编一起了解看看吧。 HTML布局 div class=container div class=loading div clas
这篇文章给大家分享一个loading动画示例,是一个吃豆人的效果。小编觉得挺有趣的,因此分享给大家做个参考,文中的示例代码介绍得很详细,有需要的朋友可以参考,接下来就跟随小编一起了解看看吧。 HTML布局 <div class="container"> <div class="loading"> <div class="eat"></div> <div class="load"></div> <div class="load"></div> <div class="load"></div> </div> </div> CSS 样式 主要使用了动画效果,通过不断控制元素的角度位置实现一个类似于吃豆人一样的loading demo。 .loading { position: relative; width: 200px; height: 50px; display: flex; } .eat { position: relative; width: 50px; height: 50px; left: 0; color: #ff0000; animation: eat-animate 2.4s ease-in-out infinite; } @keyframes eat-animate { 100% { left: 150px; } } .eat::before { content: ''; position: absolute; width: 0; height: 0; width: 50px; height: 25px; top: 0; border-radius: 50px 50px 0 0; background: currentColor; transform: rotate(-30deg); animation: eat-top 2.4s ease-in-out infinite。 (编辑:PHP编程网 - 黄冈站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |