V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member Sign In
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
This topic created in 1299 days ago, the information mentioned may be changed or developed.
 |
1
horseInBlack Oct 6, 2022
直接右键，查看源代码就可以看到了
https://lycoris-recoil.com/assets/js/vender/jquery.easing.1.3.js 看动画效果也不算太复杂，你可以自己拆分一下，旋转、淡入淡出啥的 不过这个官方网站整个配图和动画效果看着真舒服 想起以前端游时代新游戏一般都会做个漂亮的官方和动画，虽然实现方式可能过时，但是效果真的很好看 现在移动端优先的背景下，真的很少有这种眼前一亮的感觉了 |
 |
2
Shorekeeper Oct 6, 2022
看源码没用框架，网站自有的 js 和 css 没有混淆 /压缩，可以看一看。
|
|
3
Shorekeeper Oct 6, 2022
动画操纵可能在 lyco_reco.common.js 和 lyco_reco.top.js 里面
|
 |
4
HugoChao Oct 6, 2022
看了一下，感觉还是设计的好，技术上不难
|
 |
5
rabbbit Oct 6, 2022
图片根据 scroll 移动应该是用的 locomotive-scroll
按钮 mouseenter 效果见 https://lycoris-recoil.com/assets/js/lyco_reco.common.js （搜 js-hov-circle ） |
|
6
rabbbit Oct 6, 2022
部分动画是纯 CSS ，不清楚是自己写的还是用的哪个库。
类似的有这个 https://animate.style/ |
|
7
rabbbit Oct 6, 2022  2
图片斜切的效果在 https://lycoris-recoil.com/assets/css/lyco_reco.top.css 搜 .is-current .p-hero_visual__kv
clip-path 居然还可以和 transition 一起用 |
 |
8
edis0n0 OP @rabbbit #7 这些 p-hero__container p-hero__header p-hero__catch 都是纯手写的么，总感觉是框架生成的
|
|
9
rabbbit Oct 6, 2022
我觉着像是手写的，p-hero__container 这种应该是 BEM 风格的 CSS 命名？
跟踪鼠标的彩色圆点在 lycoris-recoil.com/assets/js/lyco_reco.common.js 搜 var Cursor |
|
10
edis0n0 OP |
 |
11
h3n6Qx2UB9a4g477 Oct 7, 2022
草，感觉在哪里都能看到 LycoReco
|
Select Language