V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
nzbin
V2EX  ›  分享创造

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

  •  2
     
  •   nzbin ·
    nzbin · 2018-06-10 19:40:51 +08:00 · 4883 次点击
    这是一个创建于 2344 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

    第 1 条附言  ·  2018-06-11 09:51:34 +08:00
    V 站的图片好神奇,有时候显示,有时候不显示,大家能看到预览图吗
    27 条回复    2018-06-17 18:49:13 +08:00
    batnss
        1
    batnss  
       2018-06-10 19:55:49 +08:00
    红绿灯 233
    Backkey
        2
    Backkey  
       2018-06-10 20:02:52 +08:00 via Android
    喜欢❤
    strugglexiang
        3
    strugglexiang  
       2018-06-10 20:12:34 +08:00
    老哥,厉害
    nzbin
        4
    nzbin  
    OP
       2018-06-10 20:38:40 +08:00
    @batnss 没错哈,不过实现形式与第三个相同,嘿嘿
    zqjilove
        5
    zqjilove  
       2018-06-10 21:48:50 +08:00
    收藏了,已 star
    molvqingtai
        6
    molvqingtai  
       2018-06-10 21:50:55 +08:00 via Android
    有种 CSS 叫别人写的 CSS😄
    veau
        7
    veau  
       2018-06-10 22:02:06 +08:00
    收藏了,已 star
    nzbin
        8
    nzbin  
    OP
       2018-06-10 22:18:33 +08:00
    mikac
        9
    mikac  
       2018-06-10 22:20:00 +08:00
    收藏一下,楼主好厉害
    JohnChiu
        10
    JohnChiu  
       2018-06-10 23:30:51 +08:00 via iPhone
    很漂亮,点赞
    paicha
        11
    paicha  
       2018-06-10 23:50:32 +08:00
    不错,支持下。
    LeungJZ
        12
    LeungJZ  
       2018-06-11 00:26:28 +08:00
    点赞,已 star。
    CasualYours
        13
    CasualYours  
       2018-06-11 08:40:05 +08:00 via Android
    之前看到有水波的效果,感觉也比较酷。
    nzbin
        14
    nzbin  
    OP
       2018-06-11 09:54:31 +08:00
    @CasualYours 水波纹的话两个点就可以实现
    narakus
        15
    narakus  
       2018-06-11 11:05:45 +08:00
    不错,已 star
    Desiree
        16
    Desiree  
       2018-06-11 11:47:40 +08:00
    给力,向大佬学习。。
    iblessyou
        17
    iblessyou  
       2018-06-11 14:18:57 +08:00
    看不到预览图,查看页面源码 找到地址打开看到了。。。看一圈 感觉还是前几个那种常见的比较好
    grewer
        18
    grewer  
       2018-06-11 14:25:43 +08:00
    之前用 svg 做过


    @batnss 红路灯很有想法
    nzbin
        19
    nzbin  
    OP
       2018-06-11 14:36:26 +08:00
    @iblessyou 其它也比较常见吧,不过大多数类似效果都是多元素实现的,其中第二个效果也废了老大劲。又想到几个不错的点子 😎
    nzbin
        20
    nzbin  
    OP
       2018-06-11 14:47:05 +08:00
    @grewer svg 的话就比较灵活了,但是也复杂了
    wplct
        21
    wplct  
       2018-06-11 17:36:16 +08:00
    不错。star。给我们这些后端用用挺好的,比 git 好看
    iblessyou
        22
    iblessyou  
       2018-06-11 18:15:32 +08:00
    @nzbin 加载图不仅仅是样式好看问题, 从用户体验上还有个很重要的作用就是消除人的焦虑心理
    你看现在好多那种进度条都在上面弄个从左往右的动画,就是让人感觉动
    尤其是左下那个,我脑补了下我要是等加载时,虽然效果不错,但看起来感觉“很慢” ,很不舒服
    nzbin
        23
    nzbin  
    OP
       2018-06-11 18:28:07 +08:00
    @iblessyou 有道理,具体还要细调,动画节奏的调整比较费时
    imwangpan
        24
    imwangpan  
       2018-06-12 10:14:01 +08:00
    这个真的厉害啊,居然是单元素做的。简单看了下源码,第二个是用阴影做的?我真不知道阴影还有这种用法,简直打开了新世界的大门。
    看了楼主的作品,让我加深了对 box-shadow 的理解,特别是 spread-radius,感谢分享!
    nzbin
        25
    nzbin  
    OP
       2018-06-12 10:33:24 +08:00
    @imwangpan 感谢支持,实现过程中确实费了不少脑细胞 😑
    zhoushiya
        26
    zhoushiya  
       2018-06-14 10:13:16 +08:00
    @nzbin 请教下为什么在傲游 4.9.5 浏览器下不动呢?之前看 iView 的 Spin 组件也不动,但是现在动了,傲游用的也是 chromiun 内核啊,奇怪,在 chrome 上就没问题
    nzbin
        27
    nzbin  
    OP
       2018-06-17 18:49:13 +08:00
    @zhoushiya 没用过遨游,估计是内核的问题吧
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2631 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 10:32 · PVG 18:32 · LAX 02:32 · JFK 05:32
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.