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

纯 CSS 实现 Apple TV 封面视差效果

  •  3
     
  •   picturepan2 ·
    picturepan2 · 2017-03-03 21:02:11 +08:00 · 2658 次点击
    这是一个创建于 2609 天前的主题,其中的信息可能已经有所发展或是发生改变。

    预览:https://picturepan2.github.io/spectre/experimentals.html#parallax 预览


    这是 Spectre.css 框架实验性代码的一部分。

    最近还重写了文档体验,也是纯 CSS 实现的交互,比如手机端的导航菜单。

    6 条回复    2017-03-04 11:06:35 +08:00
    Neo
        1
    Neo  
       2017-03-03 21:23:49 +08:00
    不错,用伪元素触发,就可以少写几个 div 了
    picturepan2
        2
    picturepan2  
    OP
       2017-03-03 21:40:18 +08:00
    @Neo 哪个部分用伪元素?
    zhengjian
        3
    zhengjian  
       2017-03-03 21:56:30 +08:00
    锤子官网的 Banner 也不错,不知道可否实现
    参考
    http://qingjin.me/font-end/锤子科技首页 banner 图 3d 效果 /
    http://codepen.io/mqhe2007/pen/zqzJLM
    另外有个博客也差不多的效果
    https://daneden.me/
    blanu
        4
    blanu  
       2017-03-03 22:17:39 +08:00 via iPhone
    @zhengjian 其实这个 banner 原理简单到你不敢相信…你可以查一下
    lhw45202
        5
    lhw45202  
       2017-03-04 10:41:28 +08:00
    不错
    xrr2016
        6
    xrr2016  
       2017-03-04 11:06:35 +08:00
    cool
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3729 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 04:18 · PVG 12:18 · LAX 21:18 · JFK 00:18
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.