关于bilibili-春的移动特效实现
关于bilibili最新的春横幅很有意思, 试着做了下实现
1.鼠标移动的动态效果,利用 css translate 和 鼠标移动 实现效果
鼠标移动 监听 mouseenter, onmousemove, onmouseleave
- mouseenter 记录开始鼠标微信 的 X 轴坐标
- onmousemove 在这里判断了 鼠标移动的距离
在onmousemove中, 距离的移动, 根绝每个图层移动的不同, 我认为具有某种函数关系, 但是我没弄出来
所以我在代码里直接把这种函数结果记录了下来(data-move-multiple)
其中还有一些透明度也需要实现,使用了(data-is-opacity)判断 - onmouseleave 还原css样式
2. canvas 的樱花飘落效果
这个就不细说了
下面是我的代码和一些图片资源
实现效果: http://picture.liuliwa.top/bilibili-chun/index.html
图片资源: http://picture.liuliwa.top/bilibili-chun/imgs.rar
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！