vc++图片平滑代码_B站banner图片随鼠标滑动虚化效果探索

最新推荐文章于 2023-11-24 08:58:36 发布

weixin_39943220

最新推荐文章于 2023-11-24 08:58:36 发布

阅读量333

点赞数 3

文章标签： vc++图片平滑代码网页设计鼠标显示div

本文链接：https://blog.csdn.net/weixin_39943220/article/details/111275597

版权

最近，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 源码，整理如下。

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&#

最低0.47元/天解锁文章

weixin_39943220

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
vc++图片平滑代码_B站banner图片随鼠标滑动虚化效果探索

b站banner动画效果最近，B 站首页 banner 图片会跟随着鼠标的移动而进行变化，类似于相机镜头聚焦的场景虚化效果，很多玩 B 站的小伙伴应该都留意到了吧。猪猪也想实现 banner 背景随鼠标移动而虚化的效果呢。作为一名过气爬虫程序媛，网页分析能力还是有一丢丢的。扒 B 站源码首页Banner在 Google Chrome 打开 Bilibili 站首页，右键点击检查或按 F1...
复制链接

扫一扫