之前在很多 App 上看到加载动画都是三个点形式的,突发奇想试着用 CSS 做了三个点的加载动画,而且这些动画都是单元素实现的,也就是只有一个 div 标签。
因为单元素限制比较多,所以实现起来比较困难,很多加载动画有些生硬,但是基本实现了想要的效果。个人觉得这个项目比较能考验 CSS 功底。
大家也可以发挥想象力,条件是三个点以及一个元素,还能实现哪些动画效果,欢迎给我留言。
先贴上项目地址: https://github.com/nzbin/three-dots
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,感谢分享! |