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

分享一个酷酷的 SVG 动画

  •  
  •   xunuoi · 2015-11-24 11:08:49 +08:00 · 2852 次点击
    这是一个创建于 3080 天前的主题,其中的信息可能已经有所发展或是发生改变。
    CSS3+SVG 的特性实现的,利用 border 的 dashoffset 来产生动画,带动画的算法和原理说明:
    http://karat.cc/article/562f6d7bd6db69011de1bbdc
    第 1 条附言  ·  2015-11-24 16:45:36 +08:00
    demo 就是打开页面的的导航 菜单~~

    文章里面的是图片。。
    15 条回复    2016-02-01 10:04:14 +08:00
    dong3580
        1
    dong3580  
       2015-11-24 11:18:27 +08:00
    建议,鼠标移走再来点
    dong3580
        2
    dong3580  
       2015-11-24 11:20:09 +08:00
    有 bug ,鼠标移上去画了两次,
    malcolmyu
        3
    malcolmyu  
       2015-11-24 11:42:41 +08:00
    可有 demo ……都看不到效果
    caliy
        4
    caliy  
       2015-11-24 11:48:27 +08:00
    @malcolmyu 打开就是啊,网页上面的就是效果
    moonkiller
        5
    moonkiller  
       2015-11-24 11:53:37 +08:00
    @caliy 没动啊 chrome 访问的
    dyq917
        6
    dyq917  
       2015-11-24 12:01:57 +08:00
    酷你妹啊
    kanezeng
        7
    kanezeng  
       2015-11-24 12:02:11 +08:00
    @moonkiller 网页最上方的菜单。
    kanezeng
        8
    kanezeng  
       2015-11-24 12:03:58 +08:00
    不论是从 Border 里到外,还是外到里,动画都会画一次。
    xunuoi
        9
    xunuoi  
    OP
       2015-11-24 16:46:13 +08:00
    demo 就是网页最上方的 导航菜单啊。。。文章里那个图只是图片。。
    malcolmyu
        10
    malcolmyu  
       2015-11-25 18:47:37 +08:00
    @caliy 哦哦,就是你博客上面那个效果哈
    xhhjin
        11
    xhhjin  
       2015-11-26 09:06:01 +08:00
    文章底部有错误啦!!

    ©20015 - 2016 Karat All Rights Reserved
    xunuoi
        12
    xunuoi  
    OP
       2015-11-26 21:34:58 +08:00
    @malcolmyu 是哒,具体算法在 code 有注释,想迁徙改改 scss 中的变量即可!
    xunuoi
        13
    xunuoi  
    OP
       2015-11-26 21:35:32 +08:00
    @xhhjin 感谢,已修正!
    GUMU
        14
    GUMU  
       2016-01-31 23:33:27 +08:00
    发现不仅边框有动画,文字还会抖动...
    xunuoi
        15
    xunuoi  
    OP
       2016-02-01 10:04:14 +08:00
    @GUMU 恩,放大 letter-sapce 的动画,看起来文字就往外膨胀一下
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1281 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 17:17 · PVG 01:17 · LAX 10:17 · JFK 13:17
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.