B站banner图片随鼠标移动虚化效果摸索

最近，B 站首页 banner 图片会跟随着鼠标的移动而进行变化，类似于相机镜头聚焦的场景虚化效果，很多玩 B 站的小伙伴应该都留意到了吧。猪猪也想实现 banner 背景随鼠标移动而虚化的效果呢。作为一名过气爬虫程序媛，网页分析能力还是有一丢丢的。

扒 B 站源码

在 Google Chrome 打开 Bilibili 站首页，右键点击检查或按 F12 打开开发者工具，定位 B 站 banner 的网页源码位置。获取 banner 网页源代码如下。

<div class="bili-banner" style="" data-v-38a4badd=""><div data-v-0a487de8="" data-v-38a4badd="" class="animated-banner"><div class="layer"><img src="https://i0.hdslb.com/bfs/vc/8e084d67aa18ed9c42dce043e06e16b79cbb50ef.png"data-height="250" data-width="3000" height="250" width="3000"style="filter: blur(4px); transform: translate(0px, 0px) rotate(0deg);"></div><div class="layer"><img src="https://i0.hdslb.com/bfs/vc/082e39ef757826401ef82da818310d42e05bc2de.png"data-height="275" data-width="3000" height="165" width="1800"style="transform: translate(0px, 0px) rotate(0deg); filter: blur(0px);"></div><div class="layer"><img src="https://i0.hdslb.com/bfs/vc/dbd5c17c4315714de9e4ee119694d2e9efaf9639.png"data-height="250" data-width="3000" height="250" width="3000"style="transform: translate(-50px, 0px) rotate(0deg); filter: blur(1px);"></div><div class="layer"><img src="https://i0.hdslb.com/bfs/vc/cd9be0a2716adbae85fd899259381c4b2c2893c7.png"data-height="250" data-width="3000" height="150" width="1800"style="transform: translate(0px, 4.2px) rotate(0deg); filter: blur(4px);"></div><div class="layer"><img src="https://i0.hdslb.com/bfs/vc/88537437a7916ecde847fa46652b44fbd3cbbb06.png"data-height="275" data-width="3000" height="165" width="1800"style="transform: translate(0px, -1.8px) rotate(0deg); filter: blur(5px);"></div><div class="layer"><img src="https://i0.hdslb.com/bfs/vc/37d9a93baa55870506a6f3e6308e7a0c386b97c7.png"data-height="275" data-width="3000" height="178" width="1950"style="filter: blur(6px); transform: translate(0px, 0px) rotate(0deg);"></div></div>

我们可以发现 banner 的 class 标签为 “animated-banner”，背景由 6 个 div 组成，6 张图片分别如下。

将 6 张图片按顺序进行组合叠加，即可形成 B 站首页的图片。解析 B 站 bili-banner 源码，整理如下。

<!doctype html>
<html><head><title>仿B站首页-图片随鼠标移动虚化效果</title><style>.animated-banner {position: absolute;top: 0;bottom: 0;left: 0;right: 0; overflow: hidden}.layer {position: absolute;left: 0;top: 0;height: 100%;width: 100%;display: -ms-flexbox;display: flex;-ms-flex-align: center;align-items: center;-ms-flex-pack: center;justify-content: center;}</style>
</head><body><div class="animated-banner"><div class="layer"><img src="https://i0.hdslb.com/bfs/vc/8e084d67aa18ed9c42dce043e06e16b79cbb50ef.png"data-height="250" data-width="3000" height="250" width="3000"></div><div class="layer"><img src="https://i0.hdslb.com/bfs/vc/082e39ef757826401ef82da818310d42e05bc2de.png"data-height="275" data-width="3000" height="165" width="1800"></div><div class="layer"><img src="https://i0.hdslb.com/bfs/vc/dbd5c17c4315714de9e4ee119694d2e9efaf9639.png"data-height="250" data-width="3000" height="250" width="3000"></div><div class="layer"><img src="https://i0.hdslb.com/bfs/vc/cd9be0a2716adbae85fd899259381c4b2c2893c7.png"data-height="250" data-width="3000" height="150" width="1800"></div><div class="layer"><img src="https://i0.hdslb.com/bfs/vc/88537437a7916ecde847fa46652b44fbd3cbbb06.png"data-height="275" data-width="3000" height="165" width="1800"></div><div class="layer"><img src="https://i0.hdslb.com/bfs/vc/37d9a93baa55870506a6f3e6308e7a0c386b97c7.png"data-height="275" data-width="3000" height="178" width="1950"></div></div>
</body>

效果如下

逐步实现与分析

要实现图片随鼠标移动而虚化效果，主要考虑监听鼠标移动和图片虚化。移动用 transform 中的 translate，模糊虚化用 filter 中的 blur。不同图层根据鼠标来设置图片的 translate 和 blur 属性。

我们先来康康这两个 CSS 属性的作用：

filter 函数

CSS3 Filter 属性	描述	例子
blur(px)	给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；如果没有设定值，则默认是 0；这个参数可设置 css 长度值，但不接受百分比值。	img { -webkit-filter: blur(5px); filter:blur(5px);}

注意: 滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。blur 值越大，图片越模糊。

设置各图层的模糊值

<div class="animated-banner" id="animated-banner"><div class="layer" id="layer"><img id="forest"src="https://i0.hdslb.com/bfs/vc/8e084d67aa18ed9c42dce043e06e16b79cbb50ef.png" data-height="250"data-width="3000" height="250" width="3000" style="filter: blur(4px);"></div><div class="layer" id="layer"> <img id="big-person"src="https://i0.hdslb.com/bfs/vc/082e39ef757826401ef82da818310d42e05bc2de.png" data-height="275"data-width="3000" height="165" width="1800" style="filter: blur(0px);"></div><div class="layer" id="layer"><img id="hill"src="https://i0.hdslb.com/bfs/vc/dbd5c17c4315714de9e4ee119694d2e9efaf9639.png" data-height="250"data-width="3000" height="250" width="3000" style="filter: blur(1px);"></div><div class="layer" id="layer"><img id="leaves"src="https://i0.hdslb.com/bfs/vc/cd9be0a2716adbae85fd899259381c4b2c2893c7.png" data-height="250"data-width="3000" height="150" width="1800" style="filter: blur(4px);"></div><div class="layer" id="layer"><img id="small-person"src="https://i0.hdslb.com/bfs/vc/88537437a7916ecde847fa46652b44fbd3cbbb06.png" data-height="275"data-width="3000" height="165" width="1800" style="filter: blur(5px);"></div><div class="layer" id="layer"><img id="left"src="https://i0.hdslb.com/bfs/vc/37d9a93baa55870506a6f3e6308e7a0c386b97c7.png" data-height="275"data-width="3000" height="178" width="1950" style="filter: blur(6px);"></div>
</div>

首先设置默认的 blur() 值, 猪猪设置的聚焦点 blur(0px) 是 B 娘（即图层 2）, 离聚焦点 B 娘远的物体越模糊，blur 值越大，效果如下。

图片移动虚化效果实现

Banner 动画效果相当于照相机镜头聚焦景物的效果,鼠标即相机镜头，移动鼠标的位置即移动镜头位置, 设置照相机焦距，从而达到鼠标移动图层不同程度模糊的效果。这种移动镜头效果是通过移动各图层的来实现的。
B 站上边是使用了 CSS3 的 translate(x, y)，x, y 分别代表相对于原位置移动的距离。实现镜头的左右移动, 仅更改 x 值就可以了。

CSS3 transform 属性	描述
translate(x,y)	定义 2D 转换
rotate(angle)	定义 2D 旋转，在参数中规定角度

说明：transform 属性应用于元素的 2D 或 3D 转换，能实现将元素旋转，缩放，移动，倾斜等。

咱把图层的 translate(x,y)属性加上

   <div class="animated-banner" id="animated-banner"><div class="layer" id="layer"><img id="forest"src="https://i0.hdslb.com/bfs/vc/8e084d67aa18ed9c42dce043e06e16b79cbb50ef.png" data-height="250"data-width="3000" height="250" width="3000"style="transform: translate(0px, 0px) rotate(0deg); filter: blur(4px);"></div><div class="layer" id="layer"> <img id="big-person"src="https://i0.hdslb.com/bfs/vc/082e39ef757826401ef82da818310d42e05bc2de.png" data-height="275"data-width="3000" height="165" width="1800"style="transform: translate(0px, 0px) rotate(0deg); filter: blur(0px);"></div><div class="layer" id="layer"><img id="hill"src="https://i0.hdslb.com/bfs/vc/dbd5c17c4315714de9e4ee119694d2e9efaf9639.png" data-height="250"data-width="3000" height="250" width="3000"style="transform: translate(-50px, 0px) rotate(0deg); filter: blur(1px);"></div><div class="layer" id="layer"><img id="leaves"src="https://i0.hdslb.com/bfs/vc/cd9be0a2716adbae85fd899259381c4b2c2893c7.png" data-height="250"data-width="3000" height="150" width="1800"style="transform: translate(0px, 7px) rotate(0deg); filter: blur(4px);"></div><div class="layer" id="layer"><img id="small-person"src="https://i0.hdslb.com/bfs/vc/88537437a7916ecde847fa46652b44fbd3cbbb06.png" data-height="275"data-width="3000" height="165" width="1800"style="transform: translate(0px, -3px) rotate(0deg); filter: blur(5px);"></div><div class="layer" id="layer"><img id="left"src="https://i0.hdslb.com/bfs/vc/37d9a93baa55870506a6f3e6308e7a0c386b97c7.png" data-height="275"data-width="3000" height="178" width="1950"style="transform: translate(0px, 0px) rotate(0deg); filter: blur(6px);"></div>
</div>

现将 Banner 图片随鼠标移动的整个动画过程细化如下：

鼠标移入 Banner 背景图，则动画事件执行
动画随着鼠标移动，图片的 blur 和 translate 样式属性也随着变化
鼠标移出 Banner 背景图还原初始状态

着手写 js 代码实现如下

<script>var layerConfig = JSON.parse('[\{"images":[{"src":"https://i0.hdslb.com/bfs/vc/8e084d67aa18ed9c42dce043e06e16b79cbb50ef.png"}],"initial":{"blur":4}},\{"images":[\{"src":"https://i0.hdslb.com/bfs/vc/082e39ef757826401ef82da818310d42e05bc2de.png","duration":5000},\{"src":"https://i0.hdslb.com/bfs/vc/ddad7c909e4c2cf933473e971373d825e6f06519.png","duration":60},\{"src":"https://i0.hdslb.com/bfs/vc/173eafe211b4671e5aff059a1834f3e4579c7a5d.png","duration":200},\{"src":"https://i0.hdslb.com/bfs/vc/f1892bc119b722c3cda5b26269c292a90a9f5f06.png","duration":60}],"initial":{"blur":0}},\{"images":[{"src":"https://i0.hdslb.com/bfs/vc/dbd5c17c4315714de9e4ee119694d2e9efaf9639.png"}],"initial":{"translate":[-50,0],"blur":1}},\{"images":[{"src":"https://i0.hdslb.com/bfs/vc/cd9be0a2716adbae85fd899259381c4b2c2893c7.png"}],"initial":{"translate":[0,7],"blur":4}},\{"images":[{"src":"https://i0.hdslb.com/bfs/vc/88537437a7916ecde847fa46652b44fbd3cbbb06.png"}],"initial":{"translate":[0,-3],"blur":5}},\{"images":[{"src":"https://i0.hdslb.com/bfs/vc/37d9a93baa55870506a6f3e6308e7a0c386b97c7.png"}],"initial":{"blur":6}}]')// 区间限定函数function clamp(x, min, max) {if (x < min) return min;if (x > max) return max;return x;}t = document.getElementById("layer"),// 鼠标移开还原t.handleMouseLeave = function () {layerConfig.forEach(function (t) {document.getElementById("forest").setAttribute("style", "filter: blur(" + layerConfig[0].initial.blur + "px); transform: translate(0px, 0px) rotate(0deg);");document.getElementById("big-person").setAttribute("style", "filter: blur(" + layerConfig[1].initial.blur + "px); transform: translate(0px, 0px) rotate(0deg);");document.getElementById("hill").setAttribute("style", "filter: blur(" + layerConfig[2].initial.blur + "px); transform: translate(" + layerConfig[2].initial.translate[0] + "px," + layerConfig[2].initial.translate[1] + "px) rotate(0deg);");document.getElementById("leaves").setAttribute("style", "filter: blur(" + layerConfig[3].initial.blur + "px); transform: translate(" + layerConfig[3].initial.translate[0] + "px," + layerConfig[3].initial.translate[1] + "px) rotate(0deg);");document.getElementById("small-person").setAttribute("style", "filter: blur(" + layerConfig[4].initial.blur + "px); transform: translate(" + layerConfig[4].initial.translate[0] + "px," + layerConfig[4].initial.translate[1] + "px) rotate(0deg);");document.getElementById("left").setAttribute("style", "filter: blur(" + layerConfig[5].initial.blur + "px); transform: translate(0px, 0px) rotate(0deg);");});},// 鼠标移动t.handleMouseMove = function (t) {var x = t.pageX;// console.log("当前鼠标位置：", t.pageX);document.getElementById("forest").setAttribute("style", "filter: blur(" + clamp(x / 35, 0, 9) + "px); transform: translate(0px, 0px) rotate(0deg);");document.getElementById("big-person").setAttribute("style", "filter: blur(" + Math.abs(clamp(x / 75 - 7, -3, 7)) + "px); transform: translate(" + x / 50 + "px, 0px) rotate(0deg);");document.getElementById("hill").setAttribute("style", "filter: blur(" + Math.abs(clamp(x / 125 - 5, -5, 5)) + "px); transform: translate(" + x / 40 + "px, 0px) rotate(0deg);");document.getElementById("leaves").setAttribute("style", "filter: blur(" + Math.abs(clamp(x / 250 - 3, -7, 3)) + "px); transform: translate(" + x / 30 + "px, 0px) rotate(0deg);");document.getElementById("small-person").setAttribute("style", "filter: blur(" + clamp(5 - x / 250, 0, 5) + "px); transform: translate(" + x / 20 + "px, 0px) rotate(0deg);");document.getElementById("left").setAttribute("style", "filter: blur(" + clamp(6 - x / 250, 0, 6) + "px); transform: translate(" + x / 10 + "px, 0px) rotate(0deg);");},window.requestAnimationFrame(t.handleMouseMove),document.addEventListener("mouseleave", t.handleMouseLeave),window.addEventListener("mousemove", t.handleMouseMove)
</script>

如果你有仔细观察的 Banner 背景图片随鼠标移动的规律，你会发现整个动画动作有下面特点。

鼠标在向右移动的时候，聚焦点向前移，聚焦点由图层 2 逐渐转向图层 3、图层 4 到图层 6。镜头越趋向图层的聚焦点的时候，图片越清晰，镜头移出图层的时候，图层趋于模糊。当鼠标在向左移动的时候，聚焦点向后移，聚焦点由图层 2 逐渐转向图层 1。其实鼠标就是相当于镜头，聚焦到哪个景物，哪个景物就清晰，距离聚焦点越远的景物越模糊。

懂了动画模糊和镜头移动景物变化原理，blur() 和 translate(x,y) 变化规律便能能知道如何设置。

B 娘眨眼动画效果实现

动画在影视角度上来说，其实就是通过一帧帧图片迅速切换而实现的视觉上的动态效果。仔细观察 B 站的 Banner 中的 B 娘其实每隔 5 秒会进行一次眨眼动作，仔细查看前端源码，会发现第二个 div 中 img 标签中的 src 属性其实是会变动的，分析得知 B 娘眨眼动作由下面几张图循环切换而成。

通过这四张图片的不同停留时间，既可以达到视觉上的眨眼动画效果，设置图片停留时间可以通过 setTimeout()方法实现。

      // 人物动画（眨眼动作）function playImgTimer(i, index) {setTimeout((function () {var n = index === i.length - 1 ? 0 : index + 1;$('#big-person').attr("src", i[n].src);playImgTimer(i, n);}), i[index].duration)}playImgTimer(layerConfig[1].images, 0);

setTimeout()方法用来指定某个函数或字符串在指定的毫秒数之后执行。它返回一个整数，表示定时器的编号，这个值可以传递给 clearTimeout()用于取消这个函数的执行。

最后完整实现如下，本次对 B 站 Banner 前端研究因兴趣而起，很多地方完成的并不完善，如有不对或不足，请多指正。

<!doctype html>
<html><head><style>.animated-banner {position: absolute;top: 0;bottom: 0;left: 0;right: 0; overflow: hidden}.layer {position: absolute;left: 0;top: 0;height: 100%;width: 100%;display: -ms-flexbox;display: flex;-ms-flex-align: center;align-items: center;-ms-flex-pack: center;justify-content: center;}</style>
</head><body><div class="animated-banner" id="animated-banner"><div class="layer" id="layer"><img id="forest"src="https://i0.hdslb.com/bfs/vc/8e084d67aa18ed9c42dce043e06e16b79cbb50ef.png" data-height="250"data-width="3000" height="250" width="3000"style="transform: translate(0px, 0px) rotate(0deg); filter: blur(4px);"></div><div class="layer" id="layer"> <img id="big-person"src="https://i0.hdslb.com/bfs/vc/082e39ef757826401ef82da818310d42e05bc2de.png" data-height="275"data-width="3000" height="165" width="1800"style="transform: translate(0px, 0px) rotate(0deg); filter: blur(0px);"></div><div class="layer" id="layer"><img id="hill"src="https://i0.hdslb.com/bfs/vc/dbd5c17c4315714de9e4ee119694d2e9efaf9639.png" data-height="250"data-width="3000" height="250" width="3000"style="transform: translate(-50px, 0px) rotate(0deg); filter: blur(1px);"></div><div class="layer" id="layer"><img id="leaves"src="https://i0.hdslb.com/bfs/vc/cd9be0a2716adbae85fd899259381c4b2c2893c7.png" data-height="250"data-width="3000" height="150" width="1800"style="transform: translate(0px, 7px) rotate(0deg); filter: blur(4px);"></div><div class="layer" id="layer"><img id="small-person"src="https://i0.hdslb.com/bfs/vc/88537437a7916ecde847fa46652b44fbd3cbbb06.png" data-height="275"data-width="3000" height="165" width="1800"style="transform: translate(0px, -3px) rotate(0deg); filter: blur(5px);"></div><div class="layer" id="layer"><img id="left"src="https://i0.hdslb.com/bfs/vc/37d9a93baa55870506a6f3e6308e7a0c386b97c7.png" data-height="275"data-width="3000" height="178" width="1950"style="transform: translate(0px, 0px) rotate(0deg); filter: blur(6px);"></div></div><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script><script>var layerConfig = JSON.parse('[\{"images":[{"src":"https://i0.hdslb.com/bfs/vc/8e084d67aa18ed9c42dce043e06e16b79cbb50ef.png"}],"initial":{"blur":4}},\{"images":[\{"src":"https://i0.hdslb.com/bfs/vc/082e39ef757826401ef82da818310d42e05bc2de.png","duration":5000},\{"src":"https://i0.hdslb.com/bfs/vc/ddad7c909e4c2cf933473e971373d825e6f06519.png","duration":60},\{"src":"https://i0.hdslb.com/bfs/vc/173eafe211b4671e5aff059a1834f3e4579c7a5d.png","duration":200},\{"src":"https://i0.hdslb.com/bfs/vc/f1892bc119b722c3cda5b26269c292a90a9f5f06.png","duration":60}],"initial":{"blur":0}},\{"images":[{"src":"https://i0.hdslb.com/bfs/vc/dbd5c17c4315714de9e4ee119694d2e9efaf9639.png"}],"initial":{"translate":[-50,0],"blur":1}},\{"images":[{"src":"https://i0.hdslb.com/bfs/vc/cd9be0a2716adbae85fd899259381c4b2c2893c7.png"}],"initial":{"translate":[0,7],"blur":4}},\{"images":[{"src":"https://i0.hdslb.com/bfs/vc/88537437a7916ecde847fa46652b44fbd3cbbb06.png"}],"initial":{"translate":[0,-3],"blur":5}},\{"images":[{"src":"https://i0.hdslb.com/bfs/vc/37d9a93baa55870506a6f3e6308e7a0c386b97c7.png"}],"initial":{"blur":6}}]')// 人物动画（眨眼动作）function playImgTimer(i, index) {setTimeout((function () {var n = index === i.length - 1 ? 0 : index + 1;$('#big-person').attr("src", i[n].src);playImgTimer(i, n);}), i[index].duration)}playImgTimer(layerConfig[1].images, 0);// 区间限定函数function clamp(x, min, max) {if (x < min) return min;if (x > max) return max;return x;}t = document.getElementById("layer"),// 鼠标移开还原t.handleMouseLeave = function () {layerConfig.forEach(function (t) {document.getElementById("forest").setAttribute("style", "filter: blur(" + layerConfig[0].initial.blur + "px); transform: translate(0px, 0px) rotate(0deg);");document.getElementById("big-person").setAttribute("style", "filter: blur(" + layerConfig[1].initial.blur + "px); transform: translate(0px, 0px) rotate(0deg);");document.getElementById("hill").setAttribute("style", "filter: blur(" + layerConfig[2].initial.blur + "px); transform: translate(" + layerConfig[2].initial.translate[0] + "px," + layerConfig[2].initial.translate[1] + "px) rotate(0deg);");document.getElementById("leaves").setAttribute("style", "filter: blur(" + layerConfig[3].initial.blur + "px); transform: translate(" + layerConfig[3].initial.translate[0] + "px," + layerConfig[3].initial.translate[1] + "px) rotate(0deg);");document.getElementById("small-person").setAttribute("style", "filter: blur(" + layerConfig[4].initial.blur + "px); transform: translate(" + layerConfig[4].initial.translate[0] + "px," + layerConfig[4].initial.translate[1] + "px) rotate(0deg);");document.getElementById("left").setAttribute("style", "filter: blur(" + layerConfig[5].initial.blur + "px); transform: translate(0px, 0px) rotate(0deg);");});},// 鼠标移动t.handleMouseMove = function (t) {var x = t.pageX;// console.log("当前鼠标位置：", t.pageX);document.getElementById("forest").setAttribute("style", "filter: blur(" + clamp(x / 35, 0, 9) + "px); transform: translate(0px, 0px) rotate(0deg);");document.getElementById("big-person").setAttribute("style", "filter: blur(" + Math.abs(clamp(x / 75 - 7, -3, 7)) + "px); transform: translate(" + x / 50 + "px, 0px) rotate(0deg);");document.getElementById("hill").setAttribute("style", "filter: blur(" + Math.abs(clamp(x / 125 - 5, -5, 5)) + "px); transform: translate(" + x / 40 + "px, 0px) rotate(0deg);");document.getElementById("leaves").setAttribute("style", "filter: blur(" + Math.abs(clamp(x / 250 - 3, -7, 3)) + "px); transform: translate(" + x / 30 + "px, 0px) rotate(0deg);");document.getElementById("small-person").setAttribute("style", "filter: blur(" + clamp(5 - x / 250, 0, 5) + "px); transform: translate(" + x / 20 + "px, 0px) rotate(0deg);");document.getElementById("left").setAttribute("style", "filter: blur(" + clamp(6 - x / 250, 0, 6) + "px); transform: translate(" + x / 10 + "px, 0px) rotate(0deg);");},window.requestAnimationFrame(t.handleMouseMove),document.addEventListener("mouseleave", t.handleMouseLeave),window.addEventListener("mousemove", t.handleMouseMove)</script>
</body>
</html>

实现效果