5分钟实现漂亮的CSS加载动画，纯CSS实现加载动画

素颜马尾好姑娘i 2022-12-31 02:25 206阅读 0赞

**目录**

1 视频

2 知识点

2.1 CSS calc() 函数

2.2 CSS var() 函数

2.3 CSS3 box-shadow 属性

2.4 CSS3 box-sizing 属性

2.5 CSS3 filter(滤镜) 属性

2.6 CSS3动画(animation)

3 参考代码

3.1 HTML

3.2 CSS

--------------------

# **1 视频** #

视频地址：[https://www.bilibili.com/video/BV1D5411H7Tc][https_www.bilibili.com_video_BV1D5411H7Tc]

5分钟实现漂亮的加载动画，CSS实现加载动画

# 2 知识点 #

## 2.1 **CSS calc() 函数** ##

CSS calc() 函数用于动态计算长度值。

**语法**

calc(expression)

<table style="width:561px;"> 
 <tbody> 
  <tr> 
   <td style="width:110px;"> <p>值</p> </td> 
   <td style="width:448px;"> <p>描述</p> </td> 
  </tr> 
  <tr> 
   <td style="width:110px;"> <p>expression</p> </td> 
   <td style="width:448px;"> <p>必须，一个数学表达式，结果将采用运算后的返回值。</p> </td> 
  </tr> 
 </tbody> 
</table>

> 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
> 
> 任何长度值都可以使用calc()函数进行计算；
> 
> calc()函数支持 "+", "-", "\*", "/" 运算；
> 
> calc()函数使用标准的数学运算优先级规则；
> 
> 支持版本：CSS3

## **2.2 CSS var() 函数** ##

> var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，可以使用该方法。
> 
> 支持版本：CSS3

**语法**

var(custom-property-name, value)

<table style="width:577px;"> 
 <tbody> 
  <tr> 
   <td style="width:200px;"> <p>值</p> </td> 
   <td style="width:374px;"> <p>描述</p> </td> 
  </tr> 
  <tr> 
   <td style="width:200px;"> <p>custom-property-name</p> </td> 
   <td style="width:374px;"> <p>必需。自定义属性的名称，必需以 -- 开头。</p> </td> 
  </tr> 
  <tr> 
   <td style="width:200px;"> <p>value</p> </td> 
   <td style="width:374px;"> <p>可选。备用值，在属性不存在的时候使用。</p> </td> 
  </tr> 
 </tbody> 
</table>

--------------------

## 2.3 CSS3 box-shadow 属性 ##

box-shadow属性可以设置一个或多个下拉阴影的框。

<table style="width:550px;"> 
 <tbody> 
  <tr> 
   <th style="width:152px;">默认值:</th> 
   <td style="width:395px;"><em>none</em></td> 
  </tr> 
  <tr> 
   <th style="width:152px;">继承:</th> 
   <td style="width:395px;">no</td> 
  </tr> 
  <tr> 
   <th style="width:152px;">版本:</th> 
   <td style="width:395px;">CSS3</td> 
  </tr> 
  <tr> 
   <th style="width:152px;">JavaScript 语法:</th> 
   <td style="width:395px;"><em>object</em>.style.boxShadow="10px 10px 5px #888888"</td> 
  </tr> 
 </tbody> 
</table>

**语法**

box-shadow: h-shadow v-shadow blur spread color inset;

**注意：**boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

<table> 
 <tbody> 
  <tr> 
   <th>值</th> 
   <th style="width:359px;">说明</th> 
  </tr> 
  <tr> 
   <td><em>h-shadow</em></td> 
   <td style="width:359px;">必需的。水平阴影的位置。允许负值</td> 
  </tr> 
  <tr> 
   <td><em>v-shadow</em></td> 
   <td style="width:359px;">必需的。垂直阴影的位置。允许负值</td> 
  </tr> 
  <tr> 
   <td><em>blur</em></td> 
   <td style="width:359px;">可选。模糊距离</td> 
  </tr> 
  <tr> 
   <td><em>spread</em></td> 
   <td style="width:359px;">可选。阴影的大小</td> 
  </tr> 
  <tr> 
   <td><em>color</em></td> 
   <td style="width:359px;">可选。阴影的颜色。</td> 
  </tr> 
  <tr> 
   <td>inset</td> 
   <td style="width:359px;">可选。从外层的阴影（开始时）改变阴影内侧阴影</td> 
  </tr> 
 </tbody> 
</table>

## **2.4 CSS3 box-sizing 属性** ##

Box-sizing 属性允许你以某种方式定义某些元素，以适应指定区域。

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

<table style="width:429px;"> 
 <tbody> 
  <tr> 
   <th style="width:143px;">默认值:</th> 
   <td style="width:283px;">content-box</td> 
  </tr> 
  <tr> 
   <th style="width:143px;">继承:</th> 
   <td style="width:283px;">no</td> 
  </tr> 
  <tr> 
   <th style="width:143px;">版本:</th> 
   <td style="width:283px;">CSS3</td> 
  </tr> 
  <tr> 
   <th style="width:143px;">JavaScript 语法:</th> 
   <td style="width:283px;"><em>object</em>.style.boxSizing="border-box"</td> 
  </tr> 
 </tbody> 
</table>

**语法**

box-sizing: content-box|border-box|inherit:

<table> 
 <tbody> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
  </tr> 
  <tr> 
   <td>content-box</td> 
   <td>这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外</td> 
  </tr> 
  <tr> 
   <td>border-box</td> 
   <td>指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。</td> 
  </tr> 
  <tr> 
   <td>inherit</td> 
   <td>指定 box-sizing 属性的值，应该从父元素继承</td> 
  </tr> 
 </tbody> 
</table>

## 2.5 CSS3 filter(滤镜) 属性 ##

filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。

<table> 
 <tbody> 
  <tr> 
   <th style="text-align:left;vertical-align:top;width:198px;">默认值:</th> 
   <td style="border-color:#d4d4d4;text-align:left;vertical-align:top;">none</td> 
  </tr> 
  <tr> 
   <th style="text-align:left;vertical-align:top;">继承:</th> 
   <td style="border-color:#d4d4d4;text-align:left;vertical-align:top;">no</td> 
  </tr> 
  <tr> 
   <th style="text-align:left;vertical-align:top;">动画支持:</th> 
   <td style="border-color:#d4d4d4;text-align:left;vertical-align:top;">是。</td> 
  </tr> 
  <tr> 
   <th style="text-align:left;vertical-align:top;">版本:</th> 
   <td style="border-color:#d4d4d4;text-align:left;vertical-align:top;">CSS3</td> 
  </tr> 
  <tr> 
   <th style="text-align:left;vertical-align:top;">JavaScript 语法:</th> 
   <td style="border-color:#d4d4d4;text-align:left;vertical-align:top;"><em>object</em>.style.WebkitFilter="grayscale(100%)"</td> 
  </tr> 
 </tbody> 
</table>

**CSS 语法**

**提示:** 使用空格分隔多个滤镜。

**Filter 函数**

**注意:** 滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。

<table> 
 <tbody> 
  <tr> 
   <th style="text-align:left;vertical-align:top;width:181px;">Filter</th> 
   <th style="text-align:left;vertical-align:top;width:638px;">描述</th> 
  </tr> 
  <tr> 
   <td style="border-color:#d4d4d4;vertical-align:top;">none</td> 
   <td style="border-color:#d4d4d4;vertical-align:top;">默认值，没有效果。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#d4d4d4;vertical-align:top;">blur(<em>px</em>)</td> 
   <td style="border-color:#d4d4d4;vertical-align:top;">给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；<br><br> 如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#d4d4d4;vertical-align:top;">brightness(<em>%</em>)</td> 
   <td style="border-color:#d4d4d4;vertical-align:top;">给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#d4d4d4;vertical-align:top;">contrast(<em>%</em>)</td> 
   <td style="border-color:#d4d4d4;vertical-align:top;">调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。</td> 
  </tr> 
  <tr> 
   <td style="border-color:#d4d4d4;vertical-align:top;">drop-shadow(<em>h-shadow v-shadow blur spread color</em>)</td> 
   <td style="border-color:#d4d4d4;vertical-align:top;"> <p style="margin-left:0px;">给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。 函数接受&lt;shadow&gt;(在CSS3背景中定义)类型的值，除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。<code>&lt;shadow&gt;参数如下：</code></p> <p><code><strong>&lt;offset-x&gt;</strong>&nbsp;<strong>&lt;offset-y&gt;</strong>&nbsp;(必须)</code></p> <p><code>这是设置阴影偏移量的两个 &lt;length&gt;值.&nbsp;<strong>&lt;offset-x&gt;</strong>&nbsp;设定水平方向距离. 负值会使阴影出现在元素左边.&nbsp;<strong>&lt;offset-y&gt;</strong>设定垂直距离.负值会使阴影出现在元素上方。查看<strong>&lt;length&gt;</strong>可能的单位.<br><strong>如果两个值都是0</strong>, 则阴影出现在元素正后面 (如果设置了&nbsp;<code>&lt;blur-radius&gt;&nbsp;and/or&nbsp;<code>&lt;spread-radius&gt;，会有模糊效果).</code></code></code></p> <p><code><code><code><strong>&lt;blur-radius&gt;</strong>&nbsp;(可选)</code></code></code></p> <p><code><code><code>这是第三个code&gt;&lt;length&gt;值. 值越大，越模糊，则阴影会变得更大更淡.不允许负值 若未设定，默认是0&nbsp;(则阴影的边界很锐利).</code></code></code></p> <p><code><code><code><strong>&lt;spread-radius&gt;</strong>&nbsp;(可选)</code></code></code></p> <p><code><code><code>这是第四个 &lt;length&gt;值. 正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0&nbsp;(阴影会与元素一样大小).&nbsp;<br> 注意: Webkit, 以及一些其他浏览器 不支持第四个长度，如果加了也不会渲染。</code></code></code></p> <p><code><code><code>&nbsp;</code></code></code></p> <p><code><code><code><strong>&lt;color&gt;</strong>&nbsp;(可选)</code></code></code></p> <p><code><code><code>查看 &lt;color&gt;该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko&nbsp;(Firefox), Presto (Opera)和Trident (Internet Explorer)中， 会应用color<strong>color</strong>属性的值。另外, 如果颜色值省略，WebKit中阴影是透明的。</code></code></code></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#d4d4d4;vertical-align:top;">grayscale(<em>%</em>)</td> 
   <td style="border-color:#d4d4d4;vertical-align:top;"> <p style="margin-left:0px;">将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#d4d4d4;vertical-align:top;">hue-rotate(<em>deg</em>)</td> 
   <td style="border-color:#d4d4d4;vertical-align:top;"> <p style="margin-left:0px;">给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#d4d4d4;vertical-align:top;">invert(<em>%</em>)</td> 
   <td style="border-color:#d4d4d4;vertical-align:top;"> <p style="margin-left:0px;">反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#d4d4d4;vertical-align:top;">opacity(<em>%</em>)</td> 
   <td style="border-color:#d4d4d4;vertical-align:top;"> <p style="margin-left:0px;">转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#d4d4d4;vertical-align:top;">saturate(<em>%</em>)</td> 
   <td style="border-color:#d4d4d4;vertical-align:top;"> <p style="margin-left:0px;">转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#d4d4d4;vertical-align:top;">sepia(<em>%</em>)</td> 
   <td style="border-color:#d4d4d4;vertical-align:top;"> <p style="margin-left:0px;">将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#d4d4d4;vertical-align:top;">url()</td> 
   <td style="border-color:#d4d4d4;vertical-align:top;"> <p style="margin-left:0px;">URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。</p> <p style="margin-left:0px;">例如：</p> <pre style="margin-left:15px;"><code><span style="color:#000000;">filter</span><span style="color:#666600;">:</span><span style="color:#000000;"> url</span><span style="color:#666600;">(</span><span style="color:#000000;">svg</span><span style="color:#666600;">-</span><span style="color:#000000;">url</span><span style="color:#880000;">#element-id)</span></code><span style="color:#666600;">:</span><span style="color:#000000;"> url</span><span style="color:#666600;">(</span><span style="color:#000000;">svg</span><span style="color:#666600;">-</span><span style="color:#000000;">url</span><span style="color:#880000;">#element-id)</span></pre> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#d4d4d4;vertical-align:top;">initial</td> 
   <td style="border-color:#d4d4d4;vertical-align:top;"> <p style="margin-left:0px;">设置属性为默认值。</p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#d4d4d4;vertical-align:top;">inherit</td> 
   <td style="border-color:#d4d4d4;vertical-align:top;">从父元素继承该属性。</td> 
  </tr> 
 </tbody> 
</table>

##    2.6 CSS3动画(animation) ##

动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。

> **动画的基本使用：**
> 
> 1 定义动画
> 
> 2 调用定义好的动画

**定义动画语法**

@keyframes 动画名称 {
      0% {
        width: 100px;
      }
      100% {
        width: 200px
      }
    }

**使用动画语法**

div {
        /* 调用动画 */
        animation-name: 动画名称;
        /* 持续时间 */
        animation-duration: 持续时间;
    }

**动画序列**

>  *  0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列
>  *  在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果
>  *  动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数
>  *  用百分比来规定变化发生的时间，或用 from 和 to，等同于 0% 和 100%

**动画常见属性**

下面的表格列出了 @keyframes 规则和所有动画属性：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIzODUzNzQz_size_16_color_FFFFFF_t_70][]

**动画简写方式**

> 1.  动画简写方式
>     
>     /\* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 \*/
>     
>     animation: name duration timing-function delay iteration-count direction fill-mode
> 2.  知识要点
>     
>      *  简写属性里面不包含 animation-paly-state
>      *  暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用
>      *  要想动画走回来，而不是直接调回来：animation-direction: alternate
>      *  盒子动画结束后，停在结束位置：animation-fill-mode: forwards
> 3.  代码演示
>     
>     animation: move 2s linear 1s infinite alternate forwards;

**速度曲线细节**

animation-timing-function: 规定动画的速度曲线，默认是ease。

<table style="width:670px;"> 
 <tbody> 
  <tr> 
   <th>值</th> 
   <th style="width:430px;">描述</th> 
  </tr> 
  <tr> 
   <td>linear</td> 
   <td style="width:430px;">动画从头到尾的速度是相同的。</td> 
  </tr> 
  <tr> 
   <td>ease</td> 
   <td style="width:430px;">默认。动画以低速开始，然后加快，在结束前变慢。</td> 
  </tr> 
  <tr> 
   <td>ease-in</td> 
   <td style="width:430px;">动画以低速开始。</td> 
  </tr> 
  <tr> 
   <td>ease-out</td> 
   <td style="width:430px;">动画以低速结束。</td> 
  </tr> 
  <tr> 
   <td>ease-in-out</td> 
   <td style="width:430px;">动画以低速开始和结束。</td> 
  </tr> 
  <tr> 
   <td>cubic-bezier(<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>)</td> 
   <td style="width:430px;">在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。</td> 
  </tr> 
 </tbody> 
</table>

# 3 参考代码 #

## 3.1 HTML ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>加载动画：公众号AlbertYang</title>
    		<link rel="stylesheet" type="text/css" href="style.css"/>
    	</head>
    	<body>
    		<div class="loader">
    			<div style="--x:0"></div>
    			<div style="--x:1"></div>
    			<div style="--x:2"></div>
    			<div style="--x:3"></div>
    			<div style="--x:4"></div>
    			<div style="--x:5"></div>
    		</div>
    	</body>
    </html>

## 3.2 CSS ##

* {
    	margin: 0;
    	padding: 0;
    	box-sizing: border-box;
    }
    
    body {
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	background: #edf1f4;
    	min-height: 100vh;
    }
    
    .loader {
    	display: flex;
    	flex-direction: row;
    }
    
    .loader div {
    	position: relative;
    	width: 40px;
    	height: 200px;
    	margin: 20px;
    	overflow: hidden;
    	border-radius: 50px;
    	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), #edf1f4);
    	border: 2px solid #edf1f4;
    	box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.1),
    		-15px -15px 20px #fff,
    		inset -5px -5px 5px rgba(255, 255, 255, 0.5),
    		inset 5px 5px 5px rgba(0, 0, 0, 0.05);
    }
    
    .loader div::before {
    	content: "";
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    	z-index: 100;
    	border-radius: 50px;
    	box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.1),
    		-15px -15px 20px #fff,
    		inset -5px -5px 5px rgba(255, 255, 255, 0.5),
    		inset 5px 5px 5px rgba(0, 0, 0, 0.05);
    }
    
    .loader div::before {
    	content: "";
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 36px;
    	height: 36px;
    	border-radius: 50%;
    	box-shadow: inset -5px -5px 5px rgba(0, 0, 0, 0.1),
    		0 420px 0 400px #2196f3;
    	animation: animate 2.5s ease-in-out infinite;
    	animation-delay: calc(var(--x) * -0.3s);
    	transform: translateY(160px);
    }
    
    @keyframes animate {
    	0% {
    		transform: translateY(160px);
    		filter: hue-rotate(0deg);
    	}
    
    	50% {
    		transform: translateY(0px);
    		filter: hue-rotate(180deg);
    	}
    
    	100% {
    		transform: translateY(160px);
    		filter: hue-rotate(360deg);
    	}
    }

![de5bd36dfdddc3ba19086a5b531999c2.gif][]

今天的学习就到这里了，由于本人能力和知识有限，如果有写的不对的地方，还请各位大佬批评指正。**如果想继续学习提高，欢迎关注我，每天学习进步一点点，就是领先的开始，加油。如果觉得本文对你有帮助的话，欢迎转发，评论，点赞！！！**

[https_www.bilibili.com_video_BV1D5411H7Tc]: https://www.bilibili.com/video/BV1D5411H7Tc
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIzODUzNzQz_size_16_color_FFFFFF_t_70]: /images/20221120/6105c71e2190464c9dd7f859af500afa.png
[de5bd36dfdddc3ba19086a5b531999c2.gif]: /images/20221120/3663de1f95de4b0d98c9802bfc04d1cf.png