如何实现bilibili最新头部景深效果~炫酷
#如何实现bilibili最新头部景深效果~炫酷 简介 最近烟雨仔注意到 B站 主页导航栏头部有个相当炫酷的交互效果, 类似于摄影里面的 小景深 , 除了聚焦的人物, 其他前景和背景都是模糊状态. 最炫酷的地方在于, 鼠标左右移动, 会产生聚焦点的变换, 具体如下图22和33娘的效果. 还可以聚焦到不同的景物上面, 比如前景的叶子或者中景的石头. 本篇新手教程, 主要运用鼠标的 mousemove 事件进行动画效果的实现. 有不正确的地方望指正~ html结构 想要实现这样的效果, 首先需要的是一整套 png 素材. 烟雨仔为了省事就直接下载了B站的原素材, 一共是6个 png 图片. 结构上, 烟雨仔参照了 B站 的写法, 在每张图片的外面都包了一个 .layer 的div盒子.把所有的 .layer 都装进 .banner 这个大的 div 盒子. <div class="banner"> <div class="layer"> <img class="back" src="./cssSrc/background.png" alt=""> </div> <div class="layer"> <img class="person22" src="./cssSrc/person22.png" alt=""> </div> <div class="layer"> <img