V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
爱意满满的作品展示区。
picturepan2
41.68D

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

  •  3
     
  •   picturepan2 ·
    picturepan2 · Mar 3, 2017 · 3494 views
    This topic created in 3347 days ago, the information mentioned may be changed or developed.

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


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

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

    6 replies    2017-03-04 11:06:35 +08:00
    Neo
        1
    Neo  
       Mar 3, 2017
    不错,用伪元素触发,就可以少写几个 div 了
    picturepan2
        2
    picturepan2  
    OP
       Mar 3, 2017
    @Neo 哪个部分用伪元素?
    mmnsghgn
        3
    mmnsghgn  
       Mar 3, 2017
    锤子官网的 Banner 也不错,不知道可否实现
    参考
    http://qingjin.me/font-end/锤子科技首页 banner 图 3d 效果 /
    http://codepen.io/mqhe2007/pen/zqzJLM
    另外有个博客也差不多的效果
    https://daneden.me/
    blanu
        4
    blanu  
       Mar 3, 2017 via iPhone
    @zhengjian 其实这个 banner 原理简单到你不敢相信…你可以查一下
    lhw45202
        5
    lhw45202  
       Mar 4, 2017
    不错
    xrr2016
        6
    xrr2016  
       Mar 4, 2017
    cool
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   2304 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 70ms · UTC 15:53 · PVG 23:53 · LAX 08:53 · JFK 11:53
    ♥ Do have faith in what you're doing.