旋转圆圈动画通过border和rotate实现持续转动；2. 脉冲波动画利用scale与opacity变化模拟呼吸效果；3. 横条进度流动画使用伪元素和translateX制造流动感。
实现一个简单的加载动画，常用的方式是利用CSS的@keyframes和animation属性。下面介绍几种常见且实用的简单加载动画实现方法。
1. 旋转圆圈加载动画
这是最基础也最常见的加载效果，适合用于页面或组件加载时的提示。
示例代码：
HTML:
CSS:
.loader {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
说明：通过改变border-top的颜色并配合transform: rotate()实现持续旋转效果。
2. 脉冲波（呼吸灯）动画
适用于提示用户“正在加载”，视觉柔和。
立即学习“前端免费学习笔记（深入）”；
音疯
音疯是昆仑万维推出的一个AI音乐创作平台，每日可以免费生成6首歌曲。
146 查看详情 
CSS:
.loader {
width: 20px;
height: 20px;
background: #3498db;
border-radius: 50%;
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
0% { transform: scale(0.5); opacity: 0.6; }
50% { transform: scale(1.2); opacity: 1; }
100% { transform: scale(0.5); opacity: 0.6; }
}
说明：使用scale和opacity模拟“呼吸”效果，看起来像在脉动。
3. 横条进度流动画
模仿进度条流动的感觉，适合内容加载场景。
CSS:
.loader {
width: 100px;
height: 10px;
background: #f1f1f1;
border-radius: 5px;
overflow: hidden;
}
.loader::after {
content: ”;
display: block;
width: 30%;
height: 100%;
background: #3498db;
animation: slide 1.2s ease-in-out infinite;
}
@keyframes slide {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
说明：通过伪元素和translateX实现从左到右的滑动动画，模拟流动感。
基本上就这些。选择哪种动画取决于你的设计风格和使用场景。关键点是合理使用animation、transform和@keyframes，保持代码简洁高效。
以上就是如何用css实现简单加载动画的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1059382.html
微信扫一扫 
支付宝扫一扫 
