B站首页的鼠标滑动模糊效果是如何实现的？简单分析与重现

最新推荐文章于 2023-12-04 10:20:15 发布

AkagiSenpai

最新推荐文章于 2023-12-04 10:20:15 发布

阅读量1.6k

点赞数 16

分类专栏：杂记文章标签： css html javascript b站 bilibili

本文链接：https://blog.csdn.net/weixin_44176696/article/details/109179060

版权

本文探讨了B站首页鼠标滑动时的模糊效果，通过分析源码发现该效果是通过叠加六张图片，并根据鼠标位置动态改变CSS的blur和transform属性来实现的。详细解释了如何提取外链CSS，并提供了使用JavaScript模拟这一效果的代码示例。

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

最近看到 B 站首页有一个有趣的效果，即鼠标滑动实现模糊：

在这里插入图片描述

我一直很好奇这玩意如何实现，和🐍友讨论了一下，~~害以为是用webgl弄的，直到今天看了下阿B的网页源码才发现。。。。~~

首先定位到这个div，我们发现它的class叫做 animated-banner

在这里插入图片描述

其下有6个子div，展开这些子div，可以发现是背景的图片：

在这里插入图片描述

这 6 张图片分别是：

那么他们按照顺序叠加，就可以组成一张完整的首页图片了。

我们从bilibili的网页源码中提取了他们的部分代码，下面的 html 代码演示了这一叠加的结果：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div class="animated-banner">
        <div class="layer">
            <img src="https://i-blog.csdnimg.cn/blog_migrate/e4e187277f419260b7bfc0dff4777afb.png" data-height="250" data-width="3000" height="250" width="3000">
        </div>
        <div class="layer">
            <img src="https://i-blog.csdnimg.cn/blog_migrate/1d83de77d7fe9610edd59cae2eafd7db.png" data-height="275" data-width="3000" height="165" width="1800">
        </div>
        <div class="layer">
            <img src="https://i-blog.csdnimg.cn/blog_migrate/3ceca9471b434a1bd2aeae7f4c6a388d.png" data-height="250" data-width="3000" height="250" width="3000">
        </div>
        <div class="layer">
            <img src="https://i-blog.csdnimg.cn/blog_migrate/f18ca7bc8c36962d1906f7ff64f69f89.png" data-height="250" data-width="3000" height="150" width

最低0.47元/天解锁文章

AkagiSenpai

关注

16
点赞
踩
10

收藏

觉得还不错? 一键收藏
3
评论
B站首页的鼠标滑动模糊效果是如何实现的？简单分析与重现

最近看到 B 站首页有一个有趣的效果，即鼠标滑动实现模糊：我一直很好奇这玩意如何实现，和????友讨论了一下，害以为是用webgl弄的，直到今天看了下阿B的网页源码才发现。。。。首先定位到这个div，我们发现它的class叫做 animated-banner其下有6个子div，展开这些子div，可以发现是背景的图片：这 6 张图片分别是：那么他们按照顺序叠加，就可以组成一张完整的首页图片了：但是它是如何实现鼠标滑动模糊的呢？这里我尝试在开发者模式下，鼠标进行滑动，结果出乎我的意
复制链接

扫一扫

专栏目录