我们可以仅使用一个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 | 规定是否应该轮流反向播放动画。 |
还可以自由发挥,例如做动态内切圆哦~
今天用猎豹清理软件的时候发现手机上在扫描文件的时候的等待图标也可以用这个做
看到知乎里面刷新评论时的等待样式,然后自己又尝试做了一下: