闲来无事，用纯 CSS 制作的一组加载动画

[nzbin]

之前在很多 App 上看到加载动画都是三个点形式的，突发奇想试着用 CSS 做了三个点的加载动画，而且这些动画都是单元素实现的，也就是只有一个 div 标签。

因为单元素限制比较多，所以实现起来比较困难，很多加载动画有些生硬，但是基本实现了想要的效果。个人觉得这个项目比较能考验 CSS 功底。

大家也可以发挥想象力，条件是三个点以及一个元素，还能实现哪些动画效果，欢迎给我留言。

先贴上项目地址： https://github.com/nzbin/three-dots

[wplct]

不错。star。给我们这些后端用用挺好的，比 git 好看

[iblessyou]

@nzbin 加载图不仅仅是样式好看问题， 从用户体验上还有个很重要的作用就是消除人的焦虑心理
你看现在好多那种进度条都在上面弄个从左往右的动画，就是让人感觉动
尤其是左下那个，我脑补了下我要是等加载时，虽然效果不错，但看起来感觉“很慢” ，很不舒服

[nzbin]

@iblessyou 有道理，具体还要细调，动画节奏的调整比较费时

[imwangpan]

这个真的厉害啊，居然是单元素做的。简单看了下源码，第二个是用阴影做的？我真不知道阴影还有这种用法，简直打开了新世界的大门。
看了楼主的作品，让我加深了对 box-shadow 的理解，特别是 spread-radius，感谢分享！

[nzbin]

@imwangpan 感谢支持，实现过程中确实费了不少脑细胞 😑

[zhoushiya]

@nzbin 请教下为什么在傲游 4.9.5 浏览器下不动呢？之前看 iView 的 Spin 组件也不动，但是现在动了，傲游用的也是 chromiun 内核啊，奇怪，在 chrome 上就没问题

[nzbin]

@zhoushiya 没用过遨游，估计是内核的问题吧