爱意满满的作品展示区。
geelaw

2025 年,我在现代浏览器里重现了 Windows 8 的“开始”屏幕动效

  •  1
     
  •   geelaw ·
    GeeLaw · Apr 29, 2025 · 4023 views
    This topic created in 552 days ago, the information mentioned may be changed or developed.

    截图

    哔哩哔哩视频 BV1FeGmzUEPX

    实现了:

    • 带有渐变光影的磁贴(以及磁贴的边线、悬停时的外发光)
    • 按压磁贴时根据按压位置有不同的视觉反馈
    • 视差滚动(背景和磁贴的滚动速度不同)
    • 点击磁贴打开 app 的动画
    • 如果用户晕动画,则不显示动画

    其中最后一个用了 view transition API,是去年年中的新功能,主要适用的也是单页应用 (single-page application, SPA) 里复杂视图的切换动画:浏览器会计算一部分 DOM 差异,并根据差异播放动画,DOM 的替换是瞬间完成的。

    代码可以从这个 GitHub Gist 以 MIT 协议获取。

    6 replies  •  2025-05-02 23:51:46 +08:00
    Tumblr
    Tumblr
    Apr 29, 2025
    1
    不看!免得我对大佬的膜拜更上一层!! 🙉
    pike0002
    pike0002
    Apr 30, 2025
    2
    页面里面资源路径搞成可访问的?不让大家下了看的时候效果不佳
    KMpAn8Obw1QhPoEP
    KMpAn8Obw1QhPoEP
    Apr 30, 2025 via Android
    3
    很强 您真是啥都会啊
    geelaw
    geelaw
    OP
    Apr 30, 2025 via iPhone
    4
    @pike0002 #2 因为那些资源是 Windows 的,所以我无法 relicense ,网上有很多下载的地方,也可以打开 Windows 8 ISO 提取。
    abc8678
    abc8678
    Apr 30, 2025
    5
    想起了魔方格
    lizhenda
    lizhenda
    May 2, 2025
    6
    佩服啊,不过什么样的产品会需要这种效果呢,一下也想不到场景。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   5170 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 06:03 · PVG 14:03 · LAX 22:03 · JFK 01:03
    ♥ Do have faith in what you're doing.