lycoris-recoil.com 的这些过渡动画是手写 CSS 实现的吗，还是用了什么框架/生成器？看起来挺炫的。
edis0n0 · 2022-10-06 21:54:08 +08:00 · 1924 次点击这是一个创建于 779 天前的主题，其中的信息可能已经有所发展或是发生改变。
 |
1
horseInBlack 2022-10-06 22:01:58 +08:00
直接右键，查看源代码就可以看到了
https://lycoris-recoil.com/assets/js/vender/jquery.easing.1.3.js 看动画效果也不算太复杂，你可以自己拆分一下，旋转、淡入淡出啥的 不过这个官方网站整个配图和动画效果看着真舒服 想起以前端游时代新游戏一般都会做个漂亮的官方和动画，虽然实现方式可能过时，但是效果真的很好看 现在移动端优先的背景下，真的很少有这种眼前一亮的感觉了 |
 |
2
SunsetShimmer 2022-10-06 22:04:37 +08:00
看源码没用框架，网站自有的 js 和 css 没有混淆 /压缩，可以看一看。
|
|
3
SunsetShimmer 2022-10-06 22:06:15 +08:00
动画操纵可能在 lyco_reco.common.js 和 lyco_reco.top.js 里面
|
 |
4
HugoChao 2022-10-06 22:06:37 +08:00
看了一下，感觉还是设计的好，技术上不难
|
 |
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 ） |
|
6
rabbbit 2022-10-06 22:17:52 +08:00
部分动画是纯 CSS ，不清楚是自己写的还是用的哪个库。
类似的有这个 https://animate.style/ |
|
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 一起用 |
 |
8
edis0n0 OP @rabbbit #7 这些 p-hero__container p-hero__header p-hero__catch 都是纯手写的么，总感觉是框架生成的
|
|
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 |
|
10
edis0n0 OP |
 |
11
Rsplwe 2022-10-07 12:09:05 +08:00
草，感觉在哪里都能看到 LycoReco
|
Select Language