Box-Shadow Loading，可以创造无限可能
Box-Shadow 通常，我们都是用作弹框阴影、需要层次的的元素等。但是它有更强大的功能，"多层阴影"，制作一些非常有趣的动画。
box-shadow: h-shadow v-shadow blur spread color inset;
属性值描述 h-shadow 指阴影水平偏移量，其值可正可负，正值，则阴影在对象的右边，负值，阴影在对象的左边
v-shadow 指阴影的垂直偏移量，其值也可以是正负值，正值，阴影在对象的底部，负值时，阴影在对象的顶部
blur 阴影模糊半径，此参数是可选，只能为正值，如果其值为0时，表示阴影不具有模糊效果，值越大阴影的边缘就越模糊
spread 阴影扩展半径，其值可为正负值，正值，则整个阴影都延展扩大，反之，则缩小
color 阴影颜色，不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。
inset 阴影类型，默认的投影方式是外阴影；inset就是将外阴影变成内阴影
注意：多层阴影，最内层优先级最高，之后依次降低。使用逗号“，”隔开。
下面我们一起，通过简单示例来学习吧
示例一
老规矩，看图说话（这个效果，你能想到什么办法实现了？gif...），下面我们一步一步显示上图的效果
<div class="load-container load1">
<div class="loader"></div>
</div>.load-container {
width: 240px;
height: 240px;
margin: 50px auto;
}
.load1 .loader {
color: #3eaf7c;
font-size: 20px;
margin: 200px auto;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
border: 1px solid #3eaf7c;
box-shadow:
0 -3em 0 0.2em,
2em -2em 0 0.2em,
3em 0em 0 0.2em,
2em 2em 0 0.2em,
0em 3em 0 0.2em,
-2em 2em 0 0.2em,
-3em 0em 0 0.2em,
-2em -2em 0 0.2em;
}
有了这样一个图，是不是非常清楚了，我们利用多层阴影，制作一个圆圈围绕的环形。然后动画动画不停的改变每个圆圈颜色。
@keyframes aniLoad1 {
0%,
100% {
box-shadow:
0em -2.6em 0em 0em #3eaf7c,
1.8em -1.8em 0 0em rgba(0, 0, 0, 0.2),
2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),
0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2),
-2.6em 0em 0 0em rgba(0, 0, 0, 0.5),
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.7);
}
12.5% {
box-shadow:
0em -2.6em 0em 0em rgba(0, 0, 0, 0.7),
1.8em -1.8em 0 0em #3eaf7c,
2.5em 0em 0 0em rgba(0, 0, 0, 0.2),
1.75em 1.75em 0 0em rgba(0, 0, 0, 0.2),
0em 2.5em 0 0em rgba(0, 0, 0, 0.2),
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2),
-2.6em 0em 0 0em rgba(0, 0, 0, 0.2),
-1.8em -1.8em 0 0em rgba(0, 0, 0, 0.5);
}
25% {
...
}
...
}
.load1 .loader{
animation: aniLoad1 1.1s infinite ease;
}这样就形成了loading效果。
示例二
有了示例一的经验，我们稍微变形一下，动画改变每个圆圈的大小，即可形成下图动画：
<div class="load-container load2">
<div class="loader"></div>
</div>css
@keyframes aniLoad2 {
0%,
100% {
box-shadow:
0 -3em 0 0.2em,
2em -2em 0 0em,
3em 0 0 -1em,
2em 2em 0 -1em,
0 3em 0 -1em,
-2em 2em 0 -1em,
-3em 0 0 -1em,
-2em -2em 0 0;
}
12.5% {
box-shadow:
0 -3em 0 0,
2em -2em 0 0.2em,
3em 0 0 0,
2em 2em 0 -1em,
0 3em 0 -1em,
-2em 2em 0 -1em,
-3em 0 0 -1em,
-2em -2em 0 -1em;
}
25% {
...
}
...
87.5% {
...
}
}
.load2 .loader {
...
animation: aniLoad2 1.3s infinite linear;
}示例三
<div class="load-container load3">
<div class="loader"></div>
</div>css
.load3 .loader {
color: #3eaf7c;
font-size: 90px;
overflow: hidden;
width: 1em;
height: 1em;
border-radius: 50%;
margin: 72px auto;
position: relative;
animation: aniLoad3 1.7s infinite ease,
aniRotate 1.7s infinite ease;
}
@keyframes aniLoad3 {
0%,
5%,
95%,
100% {
box-shadow:
0 -0.83em 0 -0.4em,
0 -0.83em 0 -0.42em,
0 -0.83em 0 -0.44em,
0 -0.83em 0 -0.46em,
0 -0.83em 0 -0.477em;
}
10%,
59% {
box-shadow:
0 -0.83em 0 -0.4em,
-0.087em -0.825em 0 -0.42em,
-0.173em -0.812em 0 -0.44em,
-0.256em -0.789em 0 -0.46em,
-0.297em -0.775em 0 -0.477em;
}
20% {
box-shadow:
0 -0.83em 0 -0.4em,
-0.338em -0.758em 0 -0.42em,
-0.555em -0.617em 0 -0.44em,
-0.671em -0.488em 0 -0.46em,
-0.749em -0.34em 0 -0.477em;
}
38% {
box-shadow:
0 -0.83em 0 -0.4em,
-0.377em -0.74em 0 -0.42em,
-0.645em -0.522em 0 -0.44em,
-0.775em -0.297em 0 -0.46em,
-0.82em -0.09em 0 -0.477em;
}
}
@keyframes aniRotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}开始5个点，都重合，动画开始时位置改变，并旋转这个容器。
小结
本小结知识:
1、Box-Shadow 属性值，坐标系看图二
2、Box-Shadow 多阴影 用 逗号 分割
3、animation 动画（仅执行一次：forwards，永久执行 infinite）
4、animation 动画的速度曲线。linear 动画从头到尾的速度是相同的；ease 默认。动画以低速开始，然后加快，在结束前变慢；ease-in 动画以低速开始；ease-out 动画以低速结束；ease-in-out 动画以低速开始和结束；cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
5、transform 元素进行2D 或 3D 转换（行旋转、缩放、移动或倾斜）
小伙伴们，有问题可以评论区留言哦，欢迎大家点评。需要源码的小伙伴可以购买，私信我哦。点击购买《跟我一起学，让你成为CSS大神》
谢谢大家一直以来的支持。
[erphpdown] shoufeineir [/erphpdown]