V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
edis0n0
V2EX  ›  程序员

lycoris-recoil.com 的这些过渡动画是手写 CSS 实现的吗,还是用了什么框架/生成器?看起来挺炫的。

  •  
  •   edis0n0 · 2022-10-06 21:54:08 +08:00 · 1938 次点击
    这是一个创建于 790 天前的主题,其中的信息可能已经有所发展或是发生改变。
    11 条回复    2022-10-07 12:09:05 +08:00
    horseInBlack
        1
    horseInBlack  
       2022-10-06 22:01:58 +08:00
    直接右键,查看源代码就可以看到了

    https://lycoris-recoil.com/assets/js/vender/jquery.easing.1.3.js

    看动画效果也不算太复杂,你可以自己拆分一下,旋转、淡入淡出啥的

    不过这个官方网站整个配图和动画效果看着真舒服

    想起以前端游时代新游戏一般都会做个漂亮的官方和动画,虽然实现方式可能过时,但是效果真的很好看

    现在移动端优先的背景下,真的很少有这种眼前一亮的感觉了
    SunsetShimmer
        2
    SunsetShimmer  
       2022-10-06 22:04:37 +08:00
    看源码没用框架,网站自有的 js 和 css 没有混淆 /压缩,可以看一看。
    SunsetShimmer
        3
    SunsetShimmer  
       2022-10-06 22:06:15 +08:00
    动画操纵可能在 lyco_reco.common.js 和 lyco_reco.top.js 里面
    HugoChao
        4
    HugoChao  
       2022-10-06 22:06:37 +08:00
    看了一下,感觉还是设计的好,技术上不难
    rabbbit
        5
    rabbbit  
       2022-10-06 22:13:13 +08:00
    图片根据 scroll 移动应该是用的 locomotive-scroll
    按钮 mouseenter 效果见 https://lycoris-recoil.com/assets/js/lyco_reco.common.js (搜 js-hov-circle )
    rabbbit
        6
    rabbbit  
       2022-10-06 22:17:52 +08:00
    部分动画是纯 CSS ,不清楚是自己写的还是用的哪个库。
    类似的有这个 https://animate.style/
    rabbbit
        7
    rabbbit  
       2022-10-06 22:29:04 +08:00   ❤️ 2
    图片斜切的效果在 https://lycoris-recoil.com/assets/css/lyco_reco.top.css 搜 .is-current .p-hero_visual__kv
    clip-path 居然还可以和 transition 一起用
    edis0n0
        8
    edis0n0  
    OP
       2022-10-06 22:35:00 +08:00
    @rabbbit #7 这些 p-hero__container p-hero__header p-hero__catch 都是纯手写的么,总感觉是框架生成的
    rabbbit
        9
    rabbbit  
       2022-10-06 22:40:18 +08:00
    我觉着像是手写的,p-hero__container 这种应该是 BEM 风格的 CSS 命名?
    跟踪鼠标的彩色圆点在 lycoris-recoil.com/assets/js/lyco_reco.common.js 搜 var Cursor
    edis0n0
        10
    edis0n0  
    OP
       2022-10-07 12:00:50 +08:00
    @horseInBlack
    @rabbbit
    这种网站一般会做管理后台来方便修改内容吗,还是有新内容必须找程序员直接改网页
    Rsplwe
        11
    Rsplwe  
       2022-10-07 12:09:05 +08:00
    草,感觉在哪里都能看到 LycoReco
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3589 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 04:30 · PVG 12:30 · LAX 20:30 · JFK 23:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.