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

最新推荐文章于 2024-01-03 09:51:16 发布

种子选手

最新推荐文章于 2024-01-03 09:51:16 发布

阅读量2.4k

点赞数 17

文章标签： javascript css css3 jquery html5

本文链接：https://blog.csdn.net/qq_36148847/article/details/110665417

版权

本文详细介绍了如何实现B站首页banner图片跟随鼠标移动产生类似相机聚焦的虚化效果，通过分析B站源码，利用CSS的filter模糊和transform平移属性，结合JavaScript监听鼠标移动事件，动态改变图片的模糊度和位置，从而实现图片的虚化和移动。同时，文章还探讨了B站B娘眨眼动画的实现原理，通过多张图片的切换实现眨眼效果。

摘要由CSDN通过智能技术生成

sds

最近，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 张图片分别如下。

图层2 big-person

图层3 hill

图层4 leaves

图层5 small-person

图层6 left

将 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=