这是一个创建于 2360 天前的主题，其中的信息可能已经有所发展或是发生改变。
之前在很多 App 上看到加载动画都是三个点形式的，突发奇想试着用 CSS 做了三个点的加载动画，而且这些动画都是单元素实现的，也就是只有一个 div 标签。
因为单元素限制比较多，所以实现起来比较困难，很多加载动画有些生硬，但是基本实现了想要的效果。个人觉得这个项目比较能考验 CSS 功底。
大家也可以发挥想象力，条件是三个点以及一个元素，还能实现哪些动画效果，欢迎给我留言。
先贴上项目地址： https://github.com/nzbin/three-dots
第 1 条附言 · 2018-06-11 09:51:34 +08:00
V 站的图片好神奇，有时候显示，有时候不显示，大家能看到预览图吗
 |
1
batnss 2018-06-10 19:55:49 +08:00
红绿灯 233
|
 |
2
Backkey 2018-06-10 20:02:52 +08:00 via Android
喜欢❤
|
 |
3
strugglexiang 2018-06-10 20:12:34 +08:00
老哥，厉害
|
 |
5
zqjilove 2018-06-10 21:48:50 +08:00
收藏了，已 star
|
 |
6
molvqingtai 2018-06-10 21:50:55 +08:00 via Android
有种 CSS 叫别人写的 CSS😄
|
 |
7
veau 2018-06-10 22:02:06 +08:00
收藏了，已 star
|
 |
8
nzbin OP @molvqingtai 😁
|
 |
9
mikac 2018-06-10 22:20:00 +08:00
收藏一下，楼主好厉害
|
 |
10
JohnChiu 2018-06-10 23:30:51 +08:00 via iPhone
很漂亮，点赞
|
 |
11
paicha 2018-06-10 23:50:32 +08:00
不错，支持下。
|
 |
12
LeungJZ 2018-06-11 00:26:28 +08:00
点赞，已 star。
|
 |
13
CasualYours 2018-06-11 08:40:05 +08:00 via Android
之前看到有水波的效果，感觉也比较酷。
|
|
14
nzbin OP @CasualYours 水波纹的话两个点就可以实现
|
 |
15
narakus 2018-06-11 11:05:45 +08:00
不错，已 star
|
 |
16
Desiree 2018-06-11 11:47:40 +08:00
给力，向大佬学习。。
|
 |
17
iblessyou 2018-06-11 14:18:57 +08:00
看不到预览图，查看页面源码 找到地址打开看到了。。。看一圈 感觉还是前几个那种常见的比较好
|
|
19
nzbin OP @iblessyou 其它也比较常见吧，不过大多数类似效果都是多元素实现的，其中第二个效果也废了老大劲。又想到几个不错的点子 😎
|
 |
21
wplct 2018-06-11 17:36:16 +08:00
不错。star。给我们这些后端用用挺好的，比 git 好看
|
|
22
iblessyou 2018-06-11 18:15:32 +08:00
@nzbin 加载图不仅仅是样式好看问题， 从用户体验上还有个很重要的作用就是消除人的焦虑心理
你看现在好多那种进度条都在上面弄个从左往右的动画，就是让人感觉动 尤其是左下那个，我脑补了下我要是等加载时，虽然效果不错，但看起来感觉“很慢” ，很不舒服 |
 |
24
imwangpan 2018-06-12 10:14:01 +08:00
这个真的厉害啊，居然是单元素做的。简单看了下源码，第二个是用阴影做的？我真不知道阴影还有这种用法，简直打开了新世界的大门。
看了楼主的作品，让我加深了对 box-shadow 的理解，特别是 spread-radius，感谢分享！ |
Select Language