- loading动画：
1、使用到的常用函数总结
自定义属性：--*来声明变量名，var(--*)来使用，也许你要问了，为什么使用--不用$一类的呢，唉，那不是sass、less两个货用了吗
var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。
justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
justify-content: center;
justify-content: start;
justify-content: end;
justify-content: flex-start;
justify-content: flex-end;
justify-content: left;
justify-content: right;
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
justify-content: stretch;
justify-content: safe center;
justify-content: unsafe center;
justify-content: inherit;
justify-content: initial;
justify-content: unset;
align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;
stretch
默认值。元素被拉伸以适应容器。
如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
center
元素位于容器的中心。
弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
flex-start
元素位于容器的开头。
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end
元素位于容器的结尾。
弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
baseline
元素位于容器的基线上。
如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
transform: none|transform-functions;
none 定义不进行转换。
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换，只是用 X 轴的值。
translateY(y) 定义转换，只是用 Y 轴的值。
translateZ(z) 定义 3D 转换，只是用 Z 轴的值。
scale(x,y) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。
animation（动画） 属性
animation-name 指定要绑定到选择器的关键帧的名称
animation-duration 动画指定需要多少秒或毫秒完成
animation-timing-function 设置动画将如何完成一个周期
animation-delay 设置动画在启动前的延迟间隔。
animation-iteration-count 定义动画的播放次数。
animation-direction 指定是否应该轮流反向播放动画。
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state 指定动画是否正在运行或已暂停。
initial 设置属性为其默认值。
inherit 从父元素继承属性。
CSS3 @keyframes 规则
使用@keyframes规则，你可以创建动画。
创建动画是通过逐步改变从一个CSS样式设定到另一个。
在动画过程中，您可以更改CSS样式的设定多次。
指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。
0％是开头动画，100％是当动画完成
@keyframes animationname {
keyframes-selector {
css-styles;}}
animationname 必需的。定义animation的名称。
keyframes-selector 必需的。动画持续时间的百分比。
合法值：0-100%
from (和0%相同)
to (和100%相同)
注意： 您可以用一个动画keyframes-selectors。
css-styles 必需的。一个或多个合法的CSS样式属性
2、样例代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>四色小球动画</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./css/style.css" rel="stylesheet">
</head>
<body>
<div class="loader">
<span style="--i:1;--c:#2ecc71;"></span>
<span style="--i:2;--c:#3498db;"></span>
<span style="--i:3;--c:#f1c40f;"></span>
<span style="--i:4;--c:#e74c3c;"></span>
</div>
</body>
</html>
*{
margin:0;
padding:0;
}
body{
height: 100vh;
display: flex;
justify-content:center;
align-items: center;
background-color: #222;
}
.loader{
position: relative;
width:250px;
height:250px;
transform: rotate(45deg);
animation: roll 2.5s linear infinite;
}
.loader span{
position: absolute;
width: 100%;
height: 100%;
transform: rotate(calc(90deg * var(--i)));
}
.loader span::before{
content: "";
width: 70px;
height: 70px;
background-color: var(--c);
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
animation: move 2.5s cubic-bezier(0.175,0.885,0.32,1.275) infinite;
}
@keyframes move{
50%{
left:0;
box-shadow: 0 0 5px var(--c),
0 0 10px var(--c),
0 0 20px var(--c);
}
}
@keyframes roll {
to{
transform: rotate(360deg);
}
}