Blogs

2025-2-2 11:35:00

BiliBili Banner视差效果模仿实现

本文介绍了如何模仿实现 BiliBili 的 Banner 效果，主要通过视差效果实现鼠标追踪。首先，通过在 B 站控制台获取当前 Banner 的图片资源和坐标数据，并将这些数据转换为 JSON 格式。接着，利用 position: absolute 将图片放置在一起，并根据获取的坐标信息设置初始位置，同时添加鼠标移动事件监听，实现视差效果。通过调整图层的加速度、缩放倍数和重力参数，实现横向移动、纵向移动和缩放效果。最后，通过线性插值方法实现鼠标移出后的平滑回正动画，完成整个交互效果。

2025-1-8 18:53:27

基于Canvas实现的鼠标追踪彩虹

本文介绍了如何使用 Canvas 实现一个鼠标追踪彩虹效果。首先，通过两层 for 循环绘制矩形点阵，并使用 normalize 函数将点阵均匀分布在画布上。接着，使用 VueUse 的 useMouse 获取鼠标位置，并根据鼠标远近调整点的半径。然后，将绘制圆点改为绘制线条，并根据鼠标位置调整线条长度和朝向。为了实现彩虹效果，定义了包含所有颜色的集合，并根据当前的层数返回对应的色值。最后，通过线性插值实现鼠标移出后的复位动画。最终实现了一个动态的、随鼠标移动而变化的彩虹效果。

2024-12-28 11:27:18

暗黑主题切换动画

结合nuxtjs/color-mode对主题进行切换，实现丝滑切换动画

2024-12-17 20:36:14

《双城之战2》观后感

《双城之战2》是备受期待的动画剧集，延续了《英雄联盟》宇宙中皮尔特沃夫和祖安两座城市的史诗故事。本季继续深入探索角色之间的复杂关系，尤其是金克丝、蔚和凯特琳的命运交织。故事在科技与魔法、秩序与混乱的冲突中展开，揭示了更多关于两座城市历史与未来的秘密。动画以其精湛的制作水准、细腻的情感刻画和紧张的情节设计，再次赢得了全球观众的喜爱。《双城之战2》不仅延续了第一季的高水准，还通过更深刻的主题和更丰富的角色发展，为观众带来了一场视觉与情感的双重盛宴。

2024-10-06 23:34:09

318川藏之旅

成都-新都桥-理塘-香格里拉镇-芒康-左贡-八宿-波密-林芝-拉萨