CSS加载吃豆人的效果

时间：2023-04-05 01:19:25 HTML5

emmm2333虚名前言这是一个练习的cssdemo。如有不妥之处，还请大家指正，虚心接受。嘻嘻HTML布局

CSS样式主要使用动画效果，通过不断控制元素的角度位置来实现一个吃豆人-喜欢加载演示。正文{保证金：0;填充：0；背景：#fff；}.container{位置：绝对；顶部：50%；左：50%；转换：翻译（-50%，-50%）；}.loading{位置：相对；宽度：200px；高度：50px；显示：弹性；}.eat{位置：相对；宽度：50px；高度：50px；左：0；颜色：#ff0000；动画：eat-animate2.4s无限缓入缓出；}@keyframeseat-animate{100%{left:150px;}}.eat::before{内容：'';位置：绝对；宽度：0；高度：0；宽度：50px；高度：25px；顶部：0；边框半径：50px50px00；背景：当前颜色；变换：旋转（-30deg）；动画：eat-top2.4s无限缓入缓出；}@keyframeseat-top{20%{transform:rotate(-30deg);}35%{变换：旋转（0度）；}45%{变换：旋转（-30deg）；}60%{变换：旋转（0度）；}70%{变换：旋转（-30deg）；}85%{变换：旋转（0度）；}100%{变换：旋转（0度）；}}.eat::after{内容：'';位置：绝对；宽度：0；高度：0；宽度：50px；高度：25px；底部：0；边界半径：0050px50px；背景：当前颜色；变换：旋转（30度）；动画：吃底2.4s无限缓入缓出；}@keyframeseat-bottom{20%{transform:rotate(30deg);}35%{变换：旋转（0度）；}45%{变换：旋转（30度）；}60%{变换：旋转（0度）；}70%{变换：旋转（30度）；}85%{变换：旋转（0度）；}100%{变换：旋转（0度）；}}.load{位置n:相对的；宽度：30px；高度：30px；边距：10px；颜色：#e47272；边界半径：50%；背景：当前颜色；}.load:nth-child(2){动画：load12.4s线性无限;变换：规模（1）；}@keyframesload1{35%{变换：比例（0）；}100%{转换：比例（0）；}}.load:nth-child(3){动画：load22.4s线性无限；变换：规模（1）；}@keyframesload2{30%{变换：比例（1）；}58%{变换：缩放（0）；}100%{转换：比例（0）；}}.load:nth-child(4){动画：load32.4s线性无限；变换：规模（1）；}@keyframesload3{60%{变换：比例（1）；}80%{转换：缩放（0）；}100%{转换：比例（0）；}}整体预览如上图，如有不明白欢迎直接回复...正在更新中https://github.com/ajycc20/ea...，欢迎大佬们提意见！！！而且，要是有星星就更好了（hhhh逃

上一篇：沃利斯IPQ6010-IPQ6018-IPQ6000-工业wifi6路由器-DFS-M.2-

下一篇：由重构react组件引发的函数式编程的思考

CSS加载吃豆人的效果相关文章