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

svg 简单仿 mac 最小化效果

  •  
  •   qiutianaimeili · 2018-03-27 23:16:20 +08:00 · 2200 次点击
    这是一个创建于 2215 天前的主题,其中的信息可能已经有所发展或是发生改变。

    做了一个简单的仿照 mac 最小化弹窗的效果,效果图如下:

    主要思路就是运用 svg 遮罩,讲展开和收缩动画一分为二。

    demo 地址:http://qiutianaimeili.com/html/page/2018/03/source/mac/example_1.html

    文章地址:http://qiutianaimeili.com/html/page/2018/03/mlo8if7lag8.html

    不过没有做出内容跟着一起扭曲的效果,所以和真正的效果还是有区别,看看各位大佬有没有见过那种内容跟着一起扭曲的网页效果,望指点指点。

    5 条回复    2018-03-30 09:03:30 +08:00
    geying
        1
    geying  
       2018-03-29 16:59:33 +08:00
    看不懂啊....
    qiutianaimeili
        2
    qiutianaimeili  
    OP
       2018-03-29 17:05:55 +08:00
    @geying 看不懂效果还是看不懂我讲的东西。。
    geying
        3
    geying  
       2018-03-29 17:23:50 +08:00
    @qiutianaimeili 看不懂 svg,曲线啥的 哈哈哈 本来想研究一下的
    qiutianaimeili
        4
    qiutianaimeili  
    OP
       2018-03-29 17:32:02 +08:00
    @geying 好吧,svg 做一些效果还是可以的,你也可以收藏一下,等到时候学到了再回过头来看看。
    geying
        5
    geying  
       2018-03-30 09:03:30 +08:00
    @qiutianaimeili 已收藏
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   909 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 20:38 · PVG 04:38 · LAX 13:38 · JFK 16:38
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.