之前在很多 App 上看到加载动画都是三个点形式的，突发奇想试着用 CSS 做了三个点的加载动画，而且这些动画都是单元素实现的，也就是只有一个 div 标签。
因为单元素限制比较多，所以实现起来比较困难，很多加载动画有些生硬，但是基本实现了想要的效果。个人觉得这个项目比较能考验 CSS 功底。
大家也可以发挥想象力，条件是三个点以及一个元素，还能实现哪些动画效果，欢迎给我留言。
先贴上项目地址： https://github.com/nzbin/three-dots
爱意满满的作品展示区。
This topic created in 2903 days ago, the information mentioned may be changed or developed.
Supplement 1 · Jun 11, 2018
V 站的图片好神奇，有时候显示，有时候不显示，大家能看到预览图吗
 |
1
batnss Jun 10, 2018
红绿灯 233
|
 |
2
immao Jun 10, 2018 via Android
喜欢❤
|
 |
3
strugglexiang Jun 10, 2018
老哥，厉害
|
 |
5
zqjilove Jun 10, 2018
收藏了，已 star
|
 |
6
molvqingtai Jun 10, 2018 via Android
有种 CSS 叫别人写的 CSS😄
|
 |
7
veau Jun 10, 2018
收藏了，已 star
|
 |
8
nzbin OP @molvqingtai 😁
|
 |
9
mikac Jun 10, 2018
收藏一下，楼主好厉害
|
 |
10
JohnChiu Jun 10, 2018 via iPhone
很漂亮，点赞
|
 |
11
paicha PRO 不错，支持下。
|
 |
12
LeungJZ Jun 11, 2018
点赞，已 star。
|
 |
13
CasualYours Jun 11, 2018 via Android
之前看到有水波的效果，感觉也比较酷。
|
|
14
nzbin OP @CasualYours 水波纹的话两个点就可以实现
|
 |
15
narakus Jun 11, 2018
不错，已 star
|
 |
16
Desiree Jun 11, 2018
给力，向大佬学习。。
|
 |
17
iblessyou Jun 11, 2018
看不到预览图，查看页面源码 找到地址打开看到了。。。看一圈 感觉还是前几个那种常见的比较好
|
 |
21
wplct Jun 11, 2018
不错。star。给我们这些后端用用挺好的，比 git 好看
|
|
22
iblessyou Jun 11, 2018
@nzbin 加载图不仅仅是样式好看问题， 从用户体验上还有个很重要的作用就是消除人的焦虑心理
你看现在好多那种进度条都在上面弄个从左往右的动画，就是让人感觉动 尤其是左下那个，我脑补了下我要是等加载时，虽然效果不错，但看起来感觉“很慢” ，很不舒服 |
 |
24
imwangpan Jun 12, 2018
这个真的厉害啊，居然是单元素做的。简单看了下源码，第二个是用阴影做的？我真不知道阴影还有这种用法，简直打开了新世界的大门。
看了楼主的作品，让我加深了对 box-shadow 的理解，特别是 spread-radius，感谢分享！ |
Select Language