在css中如何制作加载动画_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

在css中如何制作加载动画

2025-10-12

浏览次数：次

返回列表

答案：CSS加载动画通过@keyframes定义关键帧，结合transform、opacity等属性实现。1. 旋转圆圈利用border差异与rotate创建持续旋转效果；2. 脉冲波动画使用scale和opacity变化模拟扩散波纹；3. 多点跳动通过多个圆点设置不同animation-delay实现错落跳动；4. 自定义线条动画借助伪元素与translateX、scaleX制作进度条式动效。核心在于合理运用animation与可动画属性，追求简洁流畅的视觉体验。

在css中如何制作加载动画

在CSS中制作加载动画，主要是利用 @keyframes 定义动画关键帧，并结合 transform、opacity 等属性实现视觉动效。下面介绍几种常见且实用的加载动画实现方式。

1. 旋转圆圈加载动画

这是最常见的加载效果，使用一个圆形元素不断旋转。

<div class="loader"></div>

对应的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 颜色制造视觉差，配合 rotate 实现持续旋转。

2. 脉冲波（呼吸）动画

模拟心跳或扩散效果，常用于提示等待状态。

.loader {
  width: 20px;
  height: 20px;
  background: #3498db;
  border-radius: 50%;
  opacity: 0.6;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.2);
    opacity: 0;
  }
  100% {
    transform: scale(0);
    opacity: 0.6;
  }
}

这个动画通过缩放和透明度变化，形成向外扩散的“波纹”感。

3. 多点跳动动画

三个小球依次上下跳动，常用于现代UI设计。

易优cms汽车车辆租赁源码1.7.2

由于疫情等原因大家都开始习惯了通过互联网上租车服务的信息多方面，且获取方式简便，不管是婚庆用车、旅游租车、还是短租等租车业务。越来越多租车企业都开始主动把租车业务推向给潜在需求客户，所以如何设计一个租车网站，以便在同行中脱颖而出就重要了，易优cms针对租车行业市场需求、目标客户、盈利模式等，进行策划、设计、制作，建设一个符合用户与搜索引擎需求的租车网站源码。网站首页

0 查看详情易优cms汽车车辆租赁源码1.7.2

.loader {
  display: flex;
  gap: 6px;
}

.dot {
  width: 8px;
  height: 8px;
  background: #3498db;
  border-radius: 50%;
  animation: bounce 1.4s ease-in-out infinite both;
}

.dot:nth-child(1) { animation-delay: -0.32s; }
.dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes bounce {
  0%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
}

HTML结构：

<div class="loader">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

每个点设置不同延迟，形成错落有致的跳动节奏。

4. 自定义线条动画

使用伪元素创建动态线条加载效果。

.loader::before {
  content: '';
  display: block;
  width: 50px;
  height: 5px;
  background: linear-gradient(90deg, #3498db, #e74c3c);
  border-radius: 3px;
  animation: slide 1.5s ease-in-out infinite;
}

@keyframes slide {
  0% { transform: translateX(0) scaleX(1); }
  50% { transform: translateX(100px) scaleX(0.2); }
  100% { transform: translateX(0) scaleX(1); }
}

这种适合做进度条或内容加载指示器。

基本上就这些。核心是掌握 @keyframes 和 animation 属性的使用，再结合 transform、opacity 等可动画属性自由发挥。加载动画不需要复杂代码，简洁流畅更重要。

以上就是在css中如何制作加载动画的详细内容，更多请关注其它相关文章！

# 选择器 # 网站建设网站制作工具 # 淮安网站建设联系方式 # 太原迎泽区全网营销推广 # 闵行网站建设机构名单 # 游戏网站推广服务怎么做 # 百度知道的营销推广方法 # 沧州seo营销推广电话 # 牛扎糖网络营销推广 # 云南电器公司网站建设 # 查关键词排名首选金手指 # 大家都 # css # 两种类型 # 进度条 # 这是 # 中不 # 自定义 # 多点 # 租车 # 加载 # 伪元素 # html # 加载动画