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

AlbertYang

发布于 2020-12-31 11:03:02

2.2K0

发布于 2020-12-31 11:03:02

文章被收录于专栏：AlbertYang的编程之路AlbertYang的编程之路

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

2 知识点

2.1 CSS calc() 函数

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

语法

calc(expression)

值	描述
expression	必须，一个数学表达式，结果将采用运算后的返回值。

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

2.2 CSS var() 函数

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

语法

var(custom-property-name, value)

值	描述
custom-property-name	必需。自定义属性的名称，必需以 -- 开头。
value	可选。备用值，在属性不存在的时候使用。

2.3 CSS3 box-shadow 属性

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

默认值:	none
继承:	no
版本:	CSS3
JavaScript 语法:	object.style.boxShadow="10px 10px 5px #888888"

语法

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

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

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

2.4 CSS3 box-sizing 属性

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

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

默认值:	content-box
继承:	no
版本:	CSS3
JavaScript 语法:	object.style.boxSizing="border-box"

语法

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

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

2.5 CSS3 filter(滤镜) 属性

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

默认值:	none
继承:	no
动画支持:	是。
版本:	CSS3
JavaScript 语法:	object.style.WebkitFilter="grayscale(100%)"

CSS 语法

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

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

Filter 函数

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

默认值，没有效果。

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 规则和所有动画属性：

动画简写方式

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

速度曲线细节

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

值	描述
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

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);
  }
}