很酷的CSS Loading动画，让网页加载更有趣

用户正在浏览网站网页时，为了更好的用户体验，经常会使用 加载中 文字或者动画来表示正在 加载数据 或 执行某项操作。而使用动画不仅能够吸引用户的注意力，同时也能够传达信息"系统正在工作中"，需要一些时间来完成任务。本文将详细介绍如何通过 CSS 创建一个 加载中 动画效果。

HTML 结构

首先是HTML代码，定义了一个类名container的<div>容器：

在这个容器里面包含了一些加载器.loader，每个加载器都具有不同的旋转角度自定义属性--r(1~4)，而每个加载器里面有20个<span>元素，并且也都具有不同的旋转角度自定义属性--r(1~20)。
后面会通过CSS设置不同的旋转角度属性--r和旋转角度子属性--i，创建多个加载器，并且每个加载器都具有不同的动画表现。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Animation</title>

  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <div class="container">
    <div class="loader" style="--r: 1">
      <span style="--i: 1"></span>
      <span style="--i: 2"></span>
      <span style="--i: 3"></span>
      <span style="--i: 4"></span>
      <span style="--i: 5"></span>
      <span style="--i: 6"></span>
      <span style="--i: 7"></span>
      <span style="--i: 8"></span>
      <span style="--i: 9"></span>
      <span style="--i: 10"></span>
      <span style="--i: 11"></span>
      <span style="--i: 12"></span>
      <span style="--i: 13"></span>
      <span style="--i: 14"></span>
      <span style="--i: 15"></span>
      <span style="--i: 16"></span>
      <span style="--i: 17"></span>
      <span style="--i: 18"></span>
      <span style="--i: 19"></span>
      <span style="--i: 20"></span>
    </div>

    <div class="loader" style="--r: 2">
      <span style="--i: 1"></span>
      <span style="--i: 2"></span>
      <span style="--i: 3"></span>
      <span style="--i: 4"></span>
      <span style="--i: 5"></span>
      <span style="--i: 6"></span>
      <span style="--i: 7"></span>
      <span style="--i: 8"></span>
      <span style="--i: 9"></span>
      <span style="--i: 10"></span>
      <span style="--i: 11"></span>
      <span style="--i: 12"></span>
      <span style="--i: 13"></span>
      <span style="--i: 14"></span>
      <span style="--i: 15"></span>
      <span style="--i: 16"></span>
      <span style="--i: 17"></span>
      <span style="--i: 18"></span>
      <span style="--i: 19"></span>
      <span style="--i: 20"></span>
    </div>

    <div class="loader" style="--r: 3">
      <span style="--i: 1"></span>
      <span style="--i: 2"></span>
      <span style="--i: 3"></span>
      <span style="--i: 4"></span>
      <span style="--i: 5"></span>
      <span style="--i: 6"></span>
      <span style="--i: 7"></span>
      <span style="--i: 8"></span>
      <span style="--i: 9"></span>
      <span style="--i: 10"></span>
      <span style="--i: 11"></span>
      <span style="--i: 12"></span>
      <span style="--i: 13"></span>
      <span style="--i: 14"></span>
      <span style="--i: 15"></span>
      <span style="--i: 16"></span>
      <span style="--i: 17"></span>
      <span style="--i: 18"></span>
      <span style="--i: 19"></span>
      <span style="--i: 20"></span>
    </div>

    <div class="loader" style="--r: 4">
      <span style="--i: 1"></span>
      <span style="--i: 2"></span>
      <span style="--i: 3"></span>
      <span style="--i: 4"></span>
      <span style="--i: 5"></span>
      <span style="--i: 6"></span>
      <span style="--i: 7"></span>
      <span style="--i: 8"></span>
      <span style="--i: 9"></span>
      <span style="--i: 10"></span>
      <span style="--i: 11"></span>
      <span style="--i: 12"></span>
      <span style="--i: 13"></span>
      <span style="--i: 14"></span>
      <span style="--i: 15"></span>
      <span style="--i: 16"></span>
      <span style="--i: 17"></span>
      <span style="--i: 18"></span>
      <span style="--i: 19"></span>
      <span style="--i: 20"></span>
    </div>
  </div>
</body>

</html>

CSS 样式

接下来看CSS代码，重置全局样式后，给.container元素定义了水平垂直居中布局，然后使用filter样式属性来应用色相旋转(hue-rotate)滤镜，将背景色调整为90度的色相。因此，子元素的任何颜色同样会添加滤镜。

首先，每个.loader元素通过transform: rotate()属性根据--r值设置旋转角度 (45deg * 1/2/3/4 = 45/90/135/180deg)。
其次，每个span元素使用定位设置初始位置在左侧，以及通过transform: rotate()属性根据--i值设置旋转角度 (18deg * 1~20 = 18 ~ 360deg)。
然后，每个span::before定义固定的宽度和高度及背景颜色。使用box-shadow属性定义了一个由多个投影组成的阴影效果，产生一种立体感。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  min-height: 100vh;
  background-color: #042104;
  filter: hue-rotate(90deg);

  display: flex;
  justify-content: center;
  align-items: center;
}

.loader {
  position: relative;
  transform: rotate(calc(var(--r) * 45deg));
}

.loader span {
  position: absolute;
  top: 0;
  left: -200px;

  width: 200px;
  height: 2px;
  transform-origin: right;
  transform: rotate(calc(var(--i) * 18deg));
}

.loader span::before {
  content: "";
  display: block;

  width: 15px;
  height: 15px;
  background-color: #00ff0a;
  border-radius: 15px;
  box-shadow: 0 0 10px #00ff0a, 
              0 0 20px #00ff0a, 
              0 0 40px #00ff0a, 
              0 0 60px #00ff0a, 
              0 0 80px #00ff0a, 0 0 100px #00ff0a;
  animation: animate 5s linear infinite;
  animation-delay: calc(-0.5s * var(--i));
}
@keyframes animate {
  0% {
    transform: translateX(200px) scale(1);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    transform: translateX(0) scale(0);
    opacity: 1;
  }
}



@media screen and (max-width: 576px) {
  .container .loader {
    scale: .6;
  }  
}

此外，通过animation属性和@keyframes规则，定义了名为animate的关键帧动画。该动画在5秒内线性地进行，无限循环播放。动画的每个关键帧设置了不同的变换效果，包括 平移、缩放和透明度 变化。根据时间的进展，加载器的形状和位置会发生变化，从而创造出动态的效果。

最后

通过本篇文章的详细介绍，相信能够帮助你更好地使用CSS来创建一个loading加载中动画，从而理解掌握和应用这个效果。你可以根据自己的需求调整大小、颜色和持续时间等参数，创建符合你网页风格的加载中动画。加载中动画不仅能够提供视觉上的反馈，告诉用户系统正在工作中，还能够改善用户体验，减少长时间等待的焦虑感。

作者：掘一
链接：https://juejin.cn/post/7296404570949173298

言

CSS3引入了强大的动画功能，使得开发者能够在不依赖JavaScript的情况下创建丰富的视觉动效。本文将深入探讨CSS3动画的核心概念、主要特性以及如何通过关键帧动画和过渡效果实现各类动画效果。

1. CSS3动画基础知识

1.1 过渡（Transition）

过渡是CSS3中最为基础的动画形式之一，它定义了一个元素在两种状态之间变化时的速度曲线和时间间隔。

/* 基本语法 */
.element {
  transition: property duration timing-function delay;
}

/* 示例 */
.button {
  background-color: red;
  transition: background-color 0.5s ease-in-out;
}

在这个例子中，当.button的background-color属性发生变化时，将会在0.5秒内平滑过渡。

1.2 关键帧动画（Keyframes）

关键帧动画允许我们自定义更复杂的动画序列，包括多个中间状态。

/* 定义关键帧动画 */
@keyframes fadeInOut {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

/* 应用动画 */
.element {
  animation: fadeInOut 2s infinite;
}

上述代码定义了一个名为fadeInOut的关键帧动画，该动画让元素从透明度0渐变至1再回到0，整个动画循环持续2秒，并且无限重复。

2. 动画属性与值

animation-name: 指定要使用的@keyframes规则名称。
animation-duration: 设置动画完成一个周期所花费的时间。
animation-timing-function: 控制动画速度曲线，如ease, linear, ease-in, ease-out等。
animation-delay: 动画开始前等待的时间。
animation-iteration-count: 动画播放次数，可以设置为具体数字或infinite表示无限循环。
animation-direction: 控制定向性动画是否应该在每次迭代中反向播放，默认为normal，即每次迭代按相同的顺序播放。
animation-fill-mode: 规定在动画执行之前和之后的状态，例如forwards可以让动画在结束后保持最后一个关键帧的样式。

3. 高级应用及技巧

动画同步与堆叠: 可以通过给不同的动画属性设置不同值来控制多个动画的同时运行或堆叠。
CSS动画事件监听: 利用JavaScript的transitionend和animationend事件可以捕获动画结束时触发的动作。
使用will-change属性: 提升动画性能，提前告知浏览器哪些属性即将改变并可能需要创建层以便优化渲染。

4. 实战案例

示例1 - 图片淡入淡出滚动效果

.image-slide {
  opacity: 0;
  transition: opacity 0.5s;
  will-change: opacity;
  
  /* 当图片进入可视区域时触发动画 */
  &.is-visible {
    opacity: 1;
  }
}

示例2 - 旋转动画

.rotate {
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

总结起来，CSS3动画功能强大且灵活，通过过渡和关键帧动画，我们可以轻松构建丰富多样的网页动态效果，提升用户体验并增强交互性。随着对CSS3动画特性的深入理解和掌握，开发者能够更加自如地运用这些技术来创作富有创意和吸引力的Web界面。

SS简介

1.什么是CSS？

CSS：Cascading Style sheet层叠样式表或级联样式表
是一种样式设置规则，用于控制页面的外观的样式

2.为什么使用CSS？

实现内容与样式的分离，方便团队开发
样式复用，便于网站后期维护
页面的精确控制，让页面更精美

3.CSS作用

页面外观美化
布局和定位

CSS动画

动画的原理

人脑的bug

定义

由许多静止的画面（帧）组成
以一定的速度（如每秒30张）连续播放时
肉眼因视觉残象产生错觉
而误以为是活动的画面

概念

帧：每个静止的画面都叫做帧
播放速度：每秒24帧（影视）或者每秒30帧（游戏）

浏览器渲染原理

浏览器渲染过程步骤

根据HTML构建HTML树（DOM）
根据CSS构建CSS树（CSSOM）
将两棵树合并成一棵渲染树（render tree）
Layout布局（文档流、盒模型、计算大小和位置）
Paint绘制（把边框颜色、文字颜色、阴影等画出来）
Comepose合成（根据层叠关系展示画面）

三棵树

如何更新样式

一般JS来更新样式

比如div.remove()删除节点
比如div.style.background = 'red'
比如div.style.display = 'none'
比如div.classList.add('red')

三种更新方式

1.JS/CSS》样式》布局》绘制》合成

全走

比如：div.remove()会触发当前消失，其它元素relayout。

2.JS/CSS》样式》绘制》合成

跳过Layout

比如：改变背景色，直接repaint+composite。

3.JS/CSS》样式》合成

跳过Layout和Paint

比如：改变transform，直接composite。

CSS动画优化

JS优化：使用requestAnimationFrame代替setTimeout或setlntervl
CSS优化：使用will-change或translate

CSS 动画的两种做法（transition 和 animation）

一. transform

四个常用功能

位移 translate
缩放 scale
旋转 rotate
倾斜 skew

经验：

一般都需要配合transition过度
inline元素不支持transform，需要先改变成block

transform: translate

translateX(像素(px) / 百分比(%))
translateY(像素(px) / 百分比(%))
translate(<像素 / 百分比>,<像素 / 百分比>？)
translateZ(像素) 且父容器加perspective
translate3d(x,y,z)

经验：

多看MDN语法
translate(-50%,-50%)可做绝对定位元素居中

#demo{
left:50%;
top:50%;
transform:translate(-50%,-50%);
}

transform: scale

scaleX(倍数)
scaleY(倍数)
scale(倍数，倍数)

经验：

用得较少，容易出现模糊

transform: rotate

rotate([<angle> | <zero> ])
rotateZ([<angle> | <zero> ])
rotateX([<angle> | <zero> ])
rotateY([<angle> | <zero> ])
rotate3d

经验：

一般用于360°旋转制作loading。

transform: skew

skewX([<angle> | <zero> ])
skewY([<angle> | <zero> ])
skew([<angle> | <zero> ]，[<angle> | <zero> ]？)

经验：

用得较少

transform 可以组合使用

transform：scale（0.5）translate（-100%，-100%）；
transform：none；取消所有

transition 过渡

作用

补充中间帧

语法

transition: 属性名时长过渡方式延迟
transition: left 200ms linear
可以用逗号分隔开两个不同的属性
transition: left200ms，top400ms
可以用all代表所有属性
transition: 200ms
过渡方式有： linear|ease|ease-in|ease-out|ease-in-out|**cubic-bezier|step-start|step-end|steps,具体含义要靠数学知识

并不是所有的属性都能过度

display: none => block 不能过渡
要改成visibility: hidden => visible
background 颜色可以过渡
opacity 透明度可以过渡

二. animation

缩写语法

animation: 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名
时长: 1s 或者 1000ms
过渡方式: 跟transition的取值一样，如linear
次数: 3 或 n 或者 infinite
方向: reverse | alternate | alternate-reverse
填充模式: none | forwards | backwards | both
是否暂停: paused | running
这些属性都有对应的单独属性

使用animation

声明关键帧 @keyframes xxx
添加动画 animation:xxx

如何让动画停在最后一帧

给animation加个forwards

@keyframes 完整语法

一种写法是from…to
另一种写法是百分数

本文为作者本人的原创文章，著作权归作者本人和饥人谷所有，转载务必注明来源。

在线咨询

上一篇：CSS美化网页
下一篇：这款免费的网红下载神器，时至今日居然还有人不会用？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商