关于bilibili-春的移动特效实现

关于bilibili最新的春横幅很有意思, 试着做了下实现

1.鼠标移动的动态效果,利用 css translate 和 鼠标移动 实现效果

鼠标移动 监听 mouseenter, onmousemove, onmouseleave

1. mouseenter 记录开始鼠标微信 的 X 轴坐标
2. onmousemove 在这里判断了 鼠标移动的距离
   在onmousemove中, 距离的移动, 根绝每个图层移动的不同, 我认为具有某种函数关系, 但是我没弄出来
   所以我在代码里直接把这种函数结果记录了下来(data-move-multiple)
   其中还有一些透明度也需要实现,使用了(data-is-opacity)判断
3. onmouseleave 还原css样式

2. canvas 的樱花飘落效果

这个就不细说了

下面是我的代码和一些图片资源

实现效果: http://picture.liuliwa.top/bilibili-chun/index.html
图片资源: http://picture.liuliwa.top/bilibili-chun/imgs.rar