1. 首页
  2. 编程语言
  3. Web开发
  4. CSS3三种加载动画样式

CSS3三种加载动画样式

上传者: 2025-05-31 06:58:42上传 ZIP文件 35.4KB 热度 1次

CSS3 的加载动画真的是前端里的小魔法。页面还没加载完,先来个动画撑场面,不光提升体验,还显得有点专业范儿。今天分享三个我常用的加载样式,样式简单,效果还挺酷,适合各种项目场景,拿去直接用都行。

渐进式加载的动画比较适合那种图片多、内容重的页面。加载条慢慢推进,给用户一点“正在努力加载中”的安心感。用animation@keyframes控制宽度从 0%到 100%,代码也不复杂:

.loading-bar {
  width: 0%;
  height: 5px;
  background-color: #3498db;
  animation: load 2s linear forwards;
}
@keyframes load {
  to { width: 100%; }
}

旋转动画就更常见了,像是熟悉的小圈圈。原理是用transform配合animation让元素持续旋转。简单搞个圆形边框,加个 top 色,转起来还挺顺眼:

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #f3f3f3;
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

过渡效果适合做那种状态切换的动效,比如提示文字的淡入淡出。场景也挺多,比如用户登录后加载欢迎信息。只要配个transition,再加个class切换就行:

.loading-text {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.loading-text.loaded {
  opacity: 1;
}

这三种加载方式其实可以混合用,比如边加载边显示内容,再来个旋转动画配合状态提示,用户体验直接拉满。如果你项目也需要点视觉反馈,不妨试试这些效果,手感还不错哦。

下载地址
用户评论