CSS简单动画实现方法分享

还在为页面加载时的用户体验发愁吗？本文将介绍几种简单实用的 **CSS加载动画实现方法**，帮助你轻松打造流畅的加载效果。告别枯燥的等待，提升用户好感度！文章详细讲解了三种常见的加载动画：**旋转圆圈动画**，通过`border`和`rotate`属性实现持续旋转；**脉冲波动画**，利用`scale`和`opacity`变化模拟呼吸灯效果；以及**横条进度流动画**，巧妙运用伪元素和`translateX`属性制造流动感。只需简单几步，就能让你的网站加载过程更加生动有趣。赶快来学习吧，让你的网站在细节上更胜一筹！

旋转圆圈动画通过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. 脉冲波（呼吸灯）动画

适用于提示用户“正在加载”，视觉柔和。

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简单动画实现方法分享》的详细内容，更多关于animation,transform,@keyframes,CSS加载动画,旋转圆圈的资料请关注golang学习网公众号！