你不知道的box-shadow

 

我们可以仅使用一个div利用shadow配合animation实现很多丰富的效果~

github: https://github.com/liuzaijiang/box-shadow-liuzj  (~\(≧▽≦)/~    求★)

box-shadow:

h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。请参阅 CSS 颜色值。
inset	可选。将外部阴影 (outset) 改为内部阴影。

这个是其属性值，不过在w3c上对于box-shaow的介绍，可能很少有人认真看一下：box-shadow 属性向框添加一个或多个阴影。

我们在添加多个阴影的时候用逗号隔开就行；

这里需要注意的是我们的div就是我们的小球“模板”，我们这里需要把它隐藏起来，也就是把它背景设置成白色，三个小球分别是它的阴影，经过水平平移出来的；对于小球的动作，我们再利用anmation来完成即可，不过这里需要注意的就是不要对div进行设置，因为3个阴影的位置是相对于这个div设置的，所以我们的div位置要保持不变；

animation:

animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

还可以自由发挥，例如做动态内切圆哦~

今天用猎豹清理软件的时候发现手机上在扫描文件的时候的等待图标也可以用这个做

看到知乎里面刷新评论时的等待样式，然后自己又尝试做了一下：