手动实现loading

farewell-Calm

已于 2025-05-19 16:03:22 修改

阅读量192

点赞数

CC 4.0 BY-SA版权

分类专栏： css样式文章标签： css css3 html

于 2021-01-14 17:41:01 首次发布

本文链接：https://blog.csdn.net/weixin_43956070/article/details/112623328

css样式专栏收录该内容

1 篇文章

订阅专栏

这篇博客展示了如何使用CSS创建一个动态的加载指示器。通过定义#loading-1及其内部span.item的样式和关键帧动画loading_one，实现了不同颜色和高度变化的动画效果。博客包含详细的CSS代码和截图，适合前端开发者学习参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

index.html
**

loading-1

** **loading.css** #loading-1 { position: relative; width: 300px; height: 80px; margin: 200px auto; border-bottom: 3px solid rgba(65, 192, 240, 1); } #loading-1 span.item{ position: absolute; bottom: 0; width: 50px; height: 20px; animation-name: loading_one; animation-duration: 2s; animation-iteration-count: infinite; animation-direction: alternate; } #loading-1 span.item.item-1{ animation-delay: .2s; } #loading-1 span.item.item-2{ left: 70px; animation-delay: .4s; } #loading-1 span.item.item-3{ left: 130px; animation-delay: .6s; } #loading-1 span.item.item-4{ left: 190px; animation-delay: .8s; } #loading-1 span.item.item-5{ left: 250px; animation-delay: 1s; } @keyframes loading_one{ 0%{ height: 20px; background-color: #f33a1d; } 50%{ height: 80px; background-color: #1ff339; } 100%{ height: 20px; background-color: #1890ff; } } ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210114173935485.png)