bilibili网页图片动态效果实现

最新推荐文章于 2023-04-06 22:56:13 发布
最新推荐文章于 2023-04-06 22:56:13 发布
阅读量2.4k 收藏 21
点赞数 9
分类专栏： 学习 文章标签： html css js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48681975/article/details/112385393
版权

bilibili网页图片动态效果实现

前一段时间在b站刷视频的时候看到了一个关于如何实现bilibili顶部导航的动画效果的视频。在看到这个视频之前，我也挺喜欢bilibili导航的动画效果，心里默默赞叹（b站nb）。由于刚自学不久，学习时间也较忙所以一直没有尝试去实现这个效果。所以当我看到这个视频的时候，我就决定要跟着视频里的思路搞明白这效果是怎么实现。
提示：代码里有ES6的语法，刚开始看代码时我也很懵，去补了一下ES6语法的相关内容才知道那些箭头函数等相关的知识。

要实现的内容

  1. 实现一个多图层组合的静态界面
  2. 实现不同图层不同清晰度的配置
  3. 实现鼠标左右移动导致的清晰度变化
  4. 实现鼠标左右移动导致的跟随位移
  5. 实现小女孩的眨眼效果
  6. 实现鼠标离开时整个效果的还原

。

提示：以下是完整的代码，有比较详细的备注说明，实现的原理也比较简单。设置图片初始位置，添加鼠标移动事件，事件处理等。搜索输入框用的是bootstrap

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bilibili.css">
    <link rel="stylesheet" href="bootstrap.min.css">
	<style>
    
    
	</style>
</head>
<body>
    
    <div id="math">
	    <div class="image"><img width="3000" height="250" src="images/bg.png"></div>
        <div class="image"><img width="1800" height="160" src="images/girl1.png"></div>
        <div class="image"><img width="3000" height="250" src="images/grassland.png"></div>
        <div class="image"><img width="1800" height="160" src="images/leaf.png"></div>
        <div class="image"><img width="1800" height="165" src="images/mushroom.png"></div>
        <div class="image"><img width="1950" height="178" src="images/spirit.png"></div>

        <div class="daohan">
	        <div class="head" style="width: 450px;">
                  <span class="spana"><a>主站</a></span>
                  <span class="spana"><a>番剧</a></span>	
                  <span class="spana"><a>游戏中心</a></span>
                  <span class="spana"><a>直播</a></span>
                  <span class="spana"><a>会员购</a></span>
				  <span class="spana"><a>漫画</a></span>	
                  <span class="spana"><a>赛事</a></span>					  
			</div>
			
			 <div class="row" style="width:500px;">
		     <div class="col-lg-6" style="width: 500px;">
				<div class="input-group">
				  <input type="text" class="form-control" placeholder="Search for...">
				  <span class="input-group-btn">
					<button class="btn btn-default" type="button">Go!</button>
				  </span>
				</div><!-- /input-group -->
			  </div><!-- /.col-lg-6 -->
            </div><!-- /.row -->

            <div class="dl">
                <div class="right">
                    <span class="touxian"></span>
                    <span><a>登录</a></span>
                    <span><a>注册</a></span>
                    <button class="tg">投稿</button>
                </div>
            </div>
        </div>
        
        
    </div>
        
    <script>
        var math=document.getElementById("math");
        var image=document.getElementsByTagName("img");//选择器，匹配选择器的所有元素
        var window_width=document.documentElement.clientWidth;//获取整个窗口的宽度
        var change=window_width/2/5;//获取鼠标移动2份1屏幕宽度，模糊度发生5px变化的值是多少
        console.log(change);
        var data_image=[
            {x:0,b:4},
            {x:0,b:0},
            {x:0,b:1},
            {x:0,b:4},
            {x:0,b:5},
            {x:0,b:6},
        ]
             function vague(){
            //image[0].style='transform:translate(0px);filter:blur(4px);'; 使不同图片模糊。换用for实现
            //image[1].style='transform:translate(0px);filter:blur(0px);';
            //image[2].style='transform:translate(0px);filter:blur(1px);';
            //image[3].style='transform:translate(0px);filter:blur(4px);';
            //image[4].style='transform:translate(0px);filter:blur(5px);';
            //image[5].style='transform:translate(0px);filter:blur(4px);';
            for(var i in image){
                if(image.hasOwnProperty(i)){
                var imagearry=image[i];
                var data=data_image[i];
                imagearry.style='transition: 0.5s linear; transform:translate('+data.x+'px);filter:blur('+data.b+'px);'; //熟记('+data.x+'px)格式。
            }
            }
        }

        
        var x=0;//x坐标本来的位置
        var x_new=0;//x坐标新的位置
        var x_x=0;//新坐标和原来坐标的差值
        math.onmouseover=function(e){  //设置一个值接收鼠标初始位置的值
              x=e.clientX;
             //console.log(x);
        }
        math.onmousemove=function(e){  //设置一个值接收鼠标移动位置的值，鼠标移动时执行效果
              x_new=e.clientX;
             //console.log(x_new);
              x_x=x-x_new;
              //console.log(x_x);
              for(var i in image){
                if(image.hasOwnProperty(i)){
				var mover_new=(6-parseInt(i))*10;
                var imagearry=image[i];
                var data=data_image[i];
                var new_b=Math.abs(data.b+(x_x/change));
				var new_data=x_x/mover_new;
                imagearry.style='transform:translate('+new_data+'px);filter:blur('+new_b+'px);'; //熟记('+data.x+'px)格式。
            }
            }
        }
        math.onmouseout=function(e){//鼠标移出恢复初始化
            vague();
        }
         var eye=1;
        timeout=4000;
        function eye_e(){
            if(eye==4){
                eye=1;
                timeout=4000;
            }
            else{
              eye+=1; 
              timeout=35;
               
            }
            image[1].src='images/girl'+eye+'.png';
            setTimeout(()=>{
                eye_e();
            },timeout);
        }
            window.onload=function(){
            vague();
            eye_e();
        }
        
    </script>
</body>
</html>

css代码

*{ margin: 0;padding: 0;} /*初始化*/
#math{
    position: relative;
    width: 100%;
    height: 155px;
    overflow: hidden;
    background-color: aquamarine;
}

.image{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.touxian{
	width:40px;
	height:40px;
    border-radius:20px;
    background: url(images/kkk.jpg);
    background-size:40px 40px;
    display: inline-block;
}
.tg{
    border: none;
    background-color: #FB7299;
    width: 100px;
    height: 40px;
    border-radius:6px;
    color: white;
}
.right span{
    display: inline-block;
    margin-right: 10px;
}
.right{
    margin-top: 10px;
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.right span a{
    line-height: 40px;
    color: white;
}
div .spana a{
    color: rgb(19, 123, 241);
    font-size: 16px;
    margin-right: 10px;
}
div.row{
    margin-right: 10px;
    display: inline-block;
}
div.head{
    display: inline-block;
    margin-left: 30px;
    z-index: 100;
}
div.head a{
    color: white;
} 
div.dl{
    z-index: 100;
    display: inline-block;
    margin-right: 30px;
}
div.daohan{
    width: 100%;
    height: 40px;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}
div.math{
    float: inline-start;
}

效果图

总结

以上就是文章的主要内容，本文仅仅简单写了bilibili导航效果的实现。也算是我前端三件套的基础学习告一段落了。目前在学Vue，希望自己能坚持下去，万事顺利，谢谢谢谢谢谢。
篮不住的十三。
关注
专栏目录
b站首页banner景深移动特效 bilibili秋
u014584271的博客
01-25 1881
看到b站的animation-banner效果太妙了,就自己也想仿写一个.去查了查资料鼓捣出来一个. 首先是成品展示 大家可能觉得这个效果看起来很复杂,其实拆开来看比较简单. 他的效果就是实现了一个镜头聚焦,那么我们分步骤进行讲解 step1 首先,让图层跟随鼠标进行移动,大家应该已经想到怎么办了,但是有个问题,每个图层跟随鼠标移动的距离不能相同,这里可以用循环进行移动距离的迭代. 其实就是让 step2 其次是让图层跟随鼠标的移动距离进行清晰度的变化,和上述的办法类似,也是构造一个函数来计算清晰度,可以
第十四讲 网页的动态效果
热门推荐
叫你不要乱扔东西
03-05 1万+
经常上网的朋友一定有过这样的体验，当打开某个网页时一张图片会慢慢移入，或者鼠标停到某个图片上它会变成另一幅图片，这就是DHTML，人见人爱的动态网页。　　动态网页可让访问者和网页产生互动，使网页元素（文字、图像等）显示简单的动画效果。　　FrontPage2000就提供了制作动态网页的方法。实现动态效果有三种方法：DHTML工具、组件和插入HTML语句，前二种方法操作都比较容易和直观，你完全可以轻
网页设计期末大作业基于HTML+CSS+JS实现仿bilibili 官网项目源代码
最新发布
05-09
网页设计期末大作业基于HTML+CSS+JS实现仿bilibili 官网项目源代码
网页图片切换效果，可以动态生成
12-05
动态生成前台代码，从后台数据库中直接读出数据，便于管理
记录下bilibili(b站)小火箭页面上划动画效果的实现
动感超人的博客
06-08 1519
觉得这种bilibili小火箭很有意思,想看看怎么实现的,发现是精灵图来实现的
动态图片JS动态效果
网页设计师
04-11 2090
.a{ border:10px #fcc solid; } .b{ border:none; } #pic{ width:500px; height:300px; overflow:hidden; } #pic0{ width:5000%; height:300px; } --> var
vc++图片平滑代码_B站banner图片随鼠标滑动虚化效果探索
weixin_39943220的博客
12-02 340
b站banner动画效果最近，B 站首页 banner 图片会跟随着鼠标的移动而进行变化，类似于相机镜头聚焦的场景虚化效果，很多玩 B 站的小伙伴应该都留意到了吧。猪猪也想实现 banner 背景随鼠标移动而虚化的效果呢。作为一名过气爬虫程序媛，网页分析能力还是有一丢丢的。扒 B 站源码首页Banner在 Google Chrome 打开 Bilibili 站首页，右键点击检查或按 F1...
bilibili网页设计站点文件
06-21
【标题】：“bilibili网页设计站点文件”指的是与哔哩哔哩（bilibili，简称B站）网站相关的前端设计资源，可能是该网站的一部分源代码、样式表、图像和其他前端元素的集合。这些文件是网页设计师或开发人员在创建和...
模仿b站的网页源码-带图片
03-19
通过分析这些文件，开发者可以了解到如何构建一个与B站类似网页的基本步骤，包括页面布局、样式设计、以及动态交互的实现。这是一次很好的实践机会，可以提升对前端开发技术的理解，尤其是对于想要深入学习Web开发的...
京东商城商品详情页面网页源码解析（静动态结合，包含CSS、HTML、Javascript、jQuery）
06-10
例如，`$(selector).click(function() {...})`用于添加点击事件监听器，`fadeIn`和`fadeOut`函数则常用于实现平滑的过渡效果。 练习4_京东商品详情界面这个文件很可能是实际的商品详情页源码副本，供你分析和学习。...
B站首页的鼠标滑动模糊效果是如何实现的？简单分析与重现
AKGWSB 's blog
10-20 1628
最近看到 B 站首页有一个有趣的效果，即鼠标滑动实现模糊： 我一直很好奇这玩意如何实现，和????友讨论了一下，害以为是用webgl弄的，直到今天看了下阿B的网页源码才发现。。。。 首先定位到这个div，我们发现它的class叫做 animated-banner 其下有6个子div，展开这些子div，可以发现是背景的图片： 这 6 张图片分别是： 那么他们按照顺序叠加，就可以组成一张完整的首页图片了： 但是它是如何实现鼠标滑动模糊的呢？这里我尝试在开发者模式下，鼠标进行滑动，结果出乎我的意
仿B站首页头部动画的实现
weixin_45717294的博客
03-22 2063
B站的前端样式一直是我学习和模仿的对象，特别是它的首页头部动画，可以随着鼠标的移动进行场景的变化，很酷，所以我对它进行了大体上的模仿 废话不多说，先看效果 完整代码如下：这里将css、js、html代码整合到一块去了，大家也可以去码云自行下载 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" c
bilibili首页导航
qq_44740605的博客
10-22 5111
bilibili导航实现 话说今天实验课,一如既往的打开阿b准备看番剧，突然发现阿b首页导航还挺好看，恰巧最近在复习原生js，就顺带在实验课上实现了这个效果。（因为想到哪写哪，啥都没封装，代码可能比较乱，见谅见谅） <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>banner</title> <style> .back{ p
B站头部 鼠标移动 产生的视差效果
m0_53579196的博客
04-06 141
判断鼠标左右移动的距离 更改backgroundPositionX。
HTML5+CSS3实现哔哩哔哩首页（完整版）
m0_63512120的博客
03-22 7763
本篇文章用html和css实现了哔哩哔哩首页面，希望这篇文章能够大家带来帮助，同时该页面的源代码和图片素材放在了文章末尾，需要了可以自行提取！
B站banner图片随鼠标移动虚化效果摸索
独化蓝翅鸟，越岭万昆仑
12-04 2469
最近，B 站首页 banner 图片会跟随着鼠标的移动而进行变化，类似于相机镜头聚焦的场景虚化效果，很多玩 B 站的小伙伴应该都留意到了吧。猪猪也想实现 banner 背景随鼠标移动而虚化的效果呢。作为一名过气爬虫程序媛，网页分析能力还是有一丢丢的。 扒 B 站源码 在 Google Chrome 打开 Bilibili 站首页，右键点击检查或按 F12 打开开发者工具，定位 B 站 banner 的网页源码位置。获取 banner 网页源代码如下。 <div class="bili-banner.
仿bilibili导航条毛玻璃效果
平凡的过吧的博客
02-06 4576
写在前面  最近自学HTML+CSS为了检测自己的学习成果选择一个网页复刻一下，作为一个二次猿自然选择了b站。 首先看下还原程度 b站原版： 个人仿写： 个人认为还是有了较高的还原度因此写下这篇博客记录一下。 代码： HTML: 主页 漫画 动画 下载专区
如何实现一个动态的背景图？
qq_51553749的博客
04-06 2911
我们可以通过 animation-name 来指定一个动画的名字，通过 animation-duration 来指定一个动画的持续时间，通过 animation-iteration-count 来指定一个动画的重复次数，以及通过 animation-timing-function 来指定一个动画的速度曲线等等。比如，我们可以用一个星空的背景图，让星星闪烁，或者用一个下雪的背景图，让雪花飘落。当然，这只是一些简单的例子，我们还可以通过组合不同的动画效果和属性来实现更多的创意和功能。写一个有趣的前端博客。
哔哩哔哩导航背景写法
八哥的博客
04-13 907
个人对bilibili很感兴趣，也是平时学习和摸鱼的好地方 而且哔站的导航也做的很好玩， 如图（动图太大上传不了，效果就是背景图片跟随鼠标来移动） 然er自己想着白嫖一下代码，结果把度娘打到吐血她也不肯给我看源码（好像还没人闲的没事写这个东东…） 哔哩哔哩，点击这里 然后自己就琢磨了一下，大概模仿了一下 开始喽 ↓↓↓ 首先去b站扣需要的素材 然后简单的写一个盒子 <template> <div class="home"> /* 这里要加一个遮罩层，也就是覆盖在内容盒子上面
bilibili网页源代码
06-06
抱歉，我之前的回答中有误，我没有理解你的意思。以下是获取Bilibili网页源代码的方法： 1. 打开浏览器，进入Bilibili网站。 2. 按下F12键，打开开发者工具。 3. 切换到"Network"选项卡。 4. 刷新页面。 5. 在过滤器中输入"api"，找到一个以https://api.bilibili.com/开头的请求。 6. 点击该请求，在右侧的"Headers"选项卡中找到"Request URL"，复制该地址。 7. 在浏览器中打开新的标签页，将复制的地址粘贴到地址栏中，回车。 8. 网页源代码会以JSON格式显示在页面中，你可以复制并保存下来。 请注意，Bilibili网站的部分内容是动态生成的，因此获取到的源代码可能不是完整的。如果你需要获取网站的完整源代码，可以考虑使用网站抓取工具。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

篮不住的十三。

你的鼓励是我最大的动力啊~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值