个人对bilibili很感兴趣，也是平时学习和摸鱼的好地方

而且哔站的导航也做的很好玩，

如图（动图太大上传不了，效果就是背景图片跟随鼠标来移动）

然er自己想着白嫖一下代码，结果把度娘打到吐血她也不肯给我看源码（好像还没人闲的没事写这个东东…）

哔哩哔哩，点击这里

然后自己就琢磨了一下，大概模仿了一下

开始喽 ↓↓↓

（ - - - 完整代码在最下面 - - - ）

首先去b站扣需要的素材

然后简单的写一个盒子

<template><div class="home">/* 这里要加一个遮罩层，也就是覆盖在内容盒子上面的一个盒子，具体原因后面会说 */<div class="mask"></div><div class="nav"><div class="nav_item"><img src="../assets/1.png" class="img1"></div></div></div>
</template>
<style scoped lang="scss">
body {margin: 0;padding: 0;.mask {width: 100%;height: 175px;position: absolute;top: 0;z-index: 39;/* background: rgba(147,258,369,0.5); */}.nav {height: 175px;overflow: hidden;.nav_item {height: 100%;position: relative;overflow: hidden;img {/* 根据图片的实际大小来调整页面上的大小 */height: 200px;/* 定位是要图片根据鼠标移动而移动时要用的，自己有点菜，不知道js怎么用transfrom */position: absolute;bottom: 0;/* 根据图片的实际大小来调整页面上的位置（主要是想着跟人家一样） */transform: translateX(-200px);}}}
}
</style>

然后大概的样子就是这样

然后就要给他添加mousemove鼠标移动事件，跟随鼠标来移动（这里有个坑），这时候你肯定想只接在.nav的盒子上面写，但是当鼠标滑过图片时，在.nav盒子上的鼠标事件就会中断，所以在外层加了一个盒子来做遮罩层，所有的事件都放到遮罩层上面来进行↓↓↓

<template><div class="home">/* 这里要加一个遮罩层，也就是覆盖在内容盒子上面的一个盒子，具体原因后面会说 *//*这里也要加一个out，鼠标离开事件，让跟随鼠标移动的元素，在鼠标离开时复原*//*over事件是来获取鼠标最开始悬浮到盒子上时的坐标，用来计算盒子内图片跟随鼠标移动的距离*/<div class="mask" @mousemove="move" @mouseout="out" @mouseover="over"></div><div class="nav"><div class="nav_item"><img src="../assets/1.png" class="img1"></div></div></div>
</template>
<script>
export default {methods: {move(data) {/*获取图片*/this.img1 = document.getElementsByClassName('img1')/*改变图片绝对定位状态下的left*//*用盒子距离左边的值 减去 鼠标悬浮到盒子那一刻的 x轴的值 等于 盒子要跟随鼠标移动的值*//*除以1.2  是因为值太大，移动太快，具体根据b站来调整*//*改成负数，是因为图片是跟鼠标相反的方向移动的*/this.img1[0].style.left = -(data.screenX - this.overData)/1.2 + 'px'/*跟随鼠标移动时，把过度时间调为0，要不感觉有延迟*/this.img1[0].style.transition = 0 + 's'},out() {/*鼠标离开后，让图片回到原来的位置，这时候要加上过度时间，否则就唰~的一下直接回去了，不好看*/this.img[1].style.left = 0 + 'px'this.img[1].style.transition = 0.2 + 's'},over(data) {/*获取鼠标悬浮到盒子那一刻的x轴坐标，用来计算*/this.overData = data.x}}}
</script>

至此，一张图片跟随鼠标移动就完成了，然后，大致内容就是添加新的图片，然后Ctrl+C/V了，大概就是这样↓↓

<template><div class="home"><div class="mask" @mousemove="move" @mouseout="out" @mouseover="over"></div><div class="nav"><!-- 大背景--最后面/最远处 --><div class="nav_item"><img src="../assets/bg.png" class="img0 imgAll"></div><!-- 主图---两个人坐在树下 --><div class="nav_item"><img src="../assets/1.png" class="img1 imgAll"></div><!-- 左边的桥 --><div class="nav_item"><img src="../assets/2.png" class="img2 imgAll"></div><!-- 主图后方--滑到最右边 带樱花树的 过度图 --><div class="nav_item"><img src="../assets/3.png" class="img3 imgAll"></div><!-- 左边大樱花树--近景 --><div class="nav_item"><img src="../assets/bigTree.png" class="img4 imgAll"></div><!-- 右边大柳枝--近景 --><div class="nav_item"><img src="../assets/willow.png" class="img5 imgAll"></div></div>
</template>
<script>
export default {methods: {move(data) {this.img = document.getElementsByClassName('imgAll')this.img0 = document.getElementsByClassName('img0')this.img0[0].style.left = -(data.screenX - this.overData)/20 + 'px'this.img0[0].style.transition = 0 + 's'this.img1 = document.getElementsByClassName('img1')this.img1[0].style.left = -(data.screenX - this.overData)/1.2 + 'px'this.img1[0].style.transition = 0 + 's'this.img2 = document.getElementsByClassName('img2')this.img2[0].style.left = -(data.screenX - this.overData)/3.3 + 'px'this.img2[0].style.transition = 0 + 's'this.img3 = document.getElementsByClassName('img3')this.img3[0].style.left = -(data.screenX - this.overData)/2.5 + 'px'this.img3[0].style.transition = 0 + 's'this.img4 = document.getElementsByClassName('img4')this.img4[0].style.left = -(data.screenX - this.overData) * 1.9 + 'px'this.img4[0].style.transition = 0 + 's'this.img5 = document.getElementsByClassName('img5')this.img5[0].style.left = -(data.screenX - this.overData) + 'px'this.img5[0].style.transition = 0 + 's'}，out() {/*因为每张图片都要加过渡和还原，就简单做了循环*/for(let i = 0;i < this.img.length; i++) {this.img[i].style.left = 0 + 'px'this.img[i].style.transition = 0.2 + 's'}},over(data) {this.overData = data.x}
}
</script>
<style scoped lang="scss">
body {margin: 0;padding: 0;.mask {width: 100%;height: 175px;position: absolute;top: 0;z-index: 39;/* background: linear-gradient(#000,#333,#666,#999,#fff,#f4f4f4); *//* opacity: 0.1; */}.nav {height: 175px;overflow: hidden;position: relative;.img0 {height: 204px;position: absolute;bottom: 2px;transform: translateX(-33%);z-index: 1;}.img1 {height: 205px;position: absolute;bottom: -15px;transform: translateX(-175px);z-index: 19;}.img2 {height: 200px;position: absolute;bottom: -13px;transform: translateX(-37.3%);z-index: 18;}.img3 {height: 143px;position: absolute;bottom: 0px;transform: translateX(25.7%);z-index: 18;}.img4 {height: 204px;position: absolute;bottom: -20px;transform: translateX(-68%);z-index: 20;filter: blur(1.5px);}.img5 {height: 240px;position: absolute;bottom: -20px;transform: translateX(520%);z-index: 20;filter: blur(1.5px);}}
}
</style>

在写图片的样式时，要注意图片的宽高，可以在b站去看具体是多少，还要注意图片的z-index，因为用到了定位，根据原版来确定各个图片的层级

↓
↓
↓

因为有些图片会有淡出淡入的效果，然后没想起来该怎么处理，所以就用了笨方法↓↓↓

   this.img9 = document.getElementsByClassName('img9')this.img9[0].style.left = (data.screenX - this.overData)/100 + 'px'this.img9[0].style.transition = 0 + 's' if(this.img9[0].style.left <= 0 + 'px') {this.img9[0].style.opacity = 0} else if(this.img9[0].style.left > 1 + 'px' && this.img9[0].style.left<= 2 + 'px') {this.img9[0].style.opacity = 0.1} else if(this.img9[0].style.left > 2 + 'px' && this.img9[0].style.left<= 3 + 'px') {this.img9[0].style.opacity = 0.2} else if(this.img9[0].style.left > 3 + 'px' && this.img9[0].style.left<= 4 + 'px') {this.img9[0].style.opacity = 0.3} else if(this.img9[0].style.left > 4 + 'px' && this.img9[0].style.left<= 5 + 'px') {this.img9[0].style.opacity = 0.4} else if(this.img9[0].style.left > 5 + 'px' && this.img9[0].style.left<= 6 + 'px') {this.img9[0].style.opacity = 0.5} else if(this.img9[0].style.left > 6 + 'px' && this.img9[0].style.left<= 7 + 'px') {this.img9[0].style.opacity = 0.6} else if(this.img9[0].style.left > 7 + 'px' && this.img9[0].style.left<= 8 + 'px') {this.img9[0].style.opacity = 0.7} else if(this.img9[0].style.left > 8 + 'px' && this.img9[0].style.left<= 9 + 'px') {this.img9[0].style.opacity = 0.8} else if(this.img9[0].style.left > 9 + 'px' && this.img9[0].style.left<= 10 + 'px') {this.img9[0].style.opacity = 0.9} else if(this.img9[0].style.left > 10 + 'px' && this.img9[0].style.left<= 200 + 'px') {this.img9[0].style.opacity = 1}

这样就大概的模仿了一下人家的效果

然后好像没有其他要说的了 下面是全部代码

<template><div class="home"><div class="mask" @mousemove="move" @mouseout="out" @mouseover="over"></div><div class="nav"><!-- 大背景--最后面/最远处 --><div class="nav_item"><img src="../assets/bg.png" class="img0 imgAll"></div><!-- 主图---两个人坐在树下 --><div class="nav_item"><img src="../assets/1.png" class="img1 imgAll"></div><!-- 左边的桥 --><div class="nav_item"><img src="../assets/2.png" class="img2 imgAll"></div><!-- 主图后方--滑到最右边 带樱花树的 过度图 --><div class="nav_item"><img src="../assets/3.png" class="img3 imgAll"></div><!-- 左边大樱花树--近景 --><div class="nav_item"><img src="../assets/bigTree.png" class="img4 imgAll"></div><!-- 右边大柳枝--近景 --><div class="nav_item"><img src="../assets/willow.png" class="img5 imgAll"></div><!-- 左边带小亭子的山 + 河流 北背景 --><div class="nav_item"><img src="../assets/river.png" class="img6 imgAll"></div><!-- 最右边带树/船的 背景 --><div class="nav_item"><img src="../assets/right_tree.png" class="img7 imgAll"></div><!-- 俩船 --><div class="nav_item"><img src="../assets/ship_2.png" class="img8 imgAll"></div><!-- 会隐藏的船 --><div class="nav_item"><img src="../assets/ship.png" class="img9 imgAll"></div><!-- 放风筝背景 --><div class="nav_item"><img src="../assets/kite_bg.png" class="img10 imgAll"></div><!-- 拿着风筝的人 --><div class="nav_item"><img src="../assets/kite.png" class="img11 imgAll"></div><!-- 最风筝的人 --><div class="nav_item"><img src="../assets/kite_2.png" class="img12 imgAll"></div><!-- 两棵树 --><div class="nav_item"><img src="../assets/tree_2.png" class="img13 imgAll"></div><!-- 中间两个人 --><div class="nav_item"><img src="../assets/people.png" class="img14 imgAll"></div><!-- logo --><a href="https://www.bilibili.com/" class="logo" target="blank"><img src="../assets/logo.png"></a></div></div>
</template><script>export default {name: 'Home',data() {return {overData: ''}},methods: {move(data) {this.img = document.getElementsByClassName('imgAll')this.img0 = document.getElementsByClassName('img0')this.img0[0].style.left = -(data.screenX - this.overData)/20 + 'px'this.img0[0].style.transition = 0 + 's'this.img1 = document.getElementsByClassName('img1')this.img1[0].style.left = -(data.screenX - this.overData)/1.2 + 'px'this.img1[0].style.transition = 0 + 's'this.img2 = document.getElementsByClassName('img2')this.img2[0].style.left = -(data.screenX - this.overData)/3.3 + 'px'this.img2[0].style.transition = 0 + 's'this.img3 = document.getElementsByClassName('img3')this.img3[0].style.left = -(data.screenX - this.overData)/2.5 + 'px'this.img3[0].style.transition = 0 + 's'this.img4 = document.getElementsByClassName('img4')this.img4[0].style.left = -(data.screenX - this.overData) * 1.9 + 'px'this.img4[0].style.transition = 0 + 's'this.img5 = document.getElementsByClassName('img5')this.img5[0].style.left = -(data.screenX - this.overData) + 'px'this.img5[0].style.transition = 0 + 's'this.img6 = document.getElementsByClassName('img6')this.img6[0].style.left = -(data.screenX - this.overData)/18 + 'px'this.img6[0].style.transition = 0 + 's'this.img7 = document.getElementsByClassName('img7')this.img7[0].style.left = -(data.screenX - this.overData)/13 + 'px'this.img7[0].style.transition = 0 + 's'this.img8 = document.getElementsByClassName('img8')this.img8[0].style.left = -(data.screenX - this.overData)/17 + 'px'this.img8[0].style.transition = 0 + 's' this.img9 = document.getElementsByClassName('img9')this.img9[0].style.left = (data.screenX - this.overData)/100 + 'px'this.img9[0].style.transition = 0 + 's' if(this.img9[0].style.left <= 0 + 'px') {this.img9[0].style.opacity = 0} else if(this.img9[0].style.left > 1 + 'px' && this.img9[0].style.left<= 2 + 'px') {this.img9[0].style.opacity = 0.1} else if(this.img9[0].style.left > 2 + 'px' && this.img9[0].style.left<= 3 + 'px') {this.img9[0].style.opacity = 0.2} else if(this.img9[0].style.left > 3 + 'px' && this.img9[0].style.left<= 4 + 'px') {this.img9[0].style.opacity = 0.3} else if(this.img9[0].style.left > 4 + 'px' && this.img9[0].style.left<= 5 + 'px') {this.img9[0].style.opacity = 0.4} else if(this.img9[0].style.left > 5 + 'px' && this.img9[0].style.left<= 6 + 'px') {this.img9[0].style.opacity = 0.5} else if(this.img9[0].style.left > 6 + 'px' && this.img9[0].style.left<= 7 + 'px') {this.img9[0].style.opacity = 0.6} else if(this.img9[0].style.left > 7 + 'px' && this.img9[0].style.left<= 8 + 'px') {this.img9[0].style.opacity = 0.7} else if(this.img9[0].style.left > 8 + 'px' && this.img9[0].style.left<= 9 + 'px') {this.img9[0].style.opacity = 0.8} else if(this.img9[0].style.left > 9 + 'px' && this.img9[0].style.left<= 10 + 'px') {this.img9[0].style.opacity = 0.9} else if(this.img9[0].style.left > 10 + 'px' && this.img9[0].style.left<= 200 + 'px') {this.img9[0].style.opacity = 1}this.img10 = document.getElementsByClassName('img10')this.img10[0].style.left = -(data.screenX - this.overData)/1.9 + 'px'this.img10[0].style.transition = 0 + 's'this.img11 = document.getElementsByClassName('img11')this.img11[0].style.left = -(data.screenX - this.overData)/100 + 'px'this.img11[0].style.transition = 0 + 's'if(this.img11[0].style.left <= 0 + 'px') {this.img11[0].style.opacity = 0} else if(this.img11[0].style.left > 1 + 'px' && this.img11[0].style.left<= 2 + 'px') {this.img11[0].style.opacity = 0.2} else if(this.img11[0].style.left > 2 + 'px' && this.img11[0].style.left<= 3 + 'px') {this.img11[0].style.opacity = 0.5} else if(this.img11[0].style.left > 3 + 'px' && this.img11[0].style.left<= 4 + 'px') {this.img11[0].style.opacity = 0.8} else if(this.img11[0].style.left > 4 + 'px' && this.img11[0].style.left<= 5 + 'px') {this.img11[0].style.opacity = 1}this.img12 = document.getElementsByClassName('img12')this.img12[0].style.left = -(data.screenX - this.overData)/100 + 'px'this.img12[0].style.transition = 0 + 's'if(this.img12[0].style.left <= 0 + 'px') {this.img12[0].style.opacity = 0} else if(this.img12[0].style.left > 1 + 'px' && this.img12[0].style.left<= 2 + 'px') {this.img12[0].style.opacity = 0.2} else if(this.img12[0].style.left > 2 + 'px' && this.img12[0].style.left<= 3 + 'px') {this.img12[0].style.opacity = 0.5} else if(this.img12[0].style.left > 3 + 'px' && this.img12[0].style.left<= 4 + 'px') {this.img12[0].style.opacity = 0.8} else if(this.img12[0].style.left > 4 + 'px' && this.img12[0].style.left<= 5 + 'px') {this.img12[0].style.opacity = 1}this.img13 = document.getElementsByClassName('img13')this.img13[0].style.left = -(data.screenX - this.overData)/1.9 + 'px'this.img13[0].style.transition = 0 + 's'this.img14 = document.getElementsByClassName('img14')this.img14[0].style.left = -(data.screenX - this.overData)/1.2 + 'px'this.img14[0].style.transition = 0 + 's'},out() {for(let i = 0;i < this.img.length; i++) {this.img[i].style.left = 0 + 'px'this.img[i].style.transition = 0.2 + 's'}this.img9[0].style.opacity = 0this.img11[0].style.opacity = 0this.img12[0].style.opacity = 0this.img14[0].style.opacity = 1},over(data) {this.overData = data.x}}
}
</script>
<style scoped lang="scss">
body {margin: 0;padding: 0;.mask {width: 100%;height: 175px;position: absolute;top: 0;z-index: 39;/* background: linear-gradient(#000,#333,#666,#999,#fff,#f4f4f4); *//* opacity: 0.1; */}.nav {height: 175px;overflow: hidden;position: relative;.img0 {height: 204px;position: absolute;bottom: 2px;transform: translateX(-33%);z-index: 1;}.img1 {height: 205px;position: absolute;bottom: -15px;transform: translateX(-175px);z-index: 19;}.img2 {height: 200px;position: absolute;bottom: -13px;transform: translateX(-37.3%);z-index: 18;}.img3 {height: 143px;position: absolute;bottom: 0px;transform: translateX(25.7%);z-index: 18;}.img4 {height: 204px;position: absolute;bottom: -20px;transform: translateX(-68%);z-index: 20;filter: blur(1.5px);}.img5 {height: 240px;position: absolute;bottom: -20px;transform: translateX(520%);z-index: 20;filter: blur(1.5px);}.img6 {height: 204px;position: absolute;bottom: -15px;transform: translateX(-10.24%);z-index: 2;}.img7 {height: 183px;position: absolute;bottom: -5px;transform: translateX(44.55%);z-index: 3;}.img8 {width: 284px;height: 71px;position: absolute;bottom: 0px;transform: translateX(521%);z-index: 3;}.img9 {width: 233px;height: 96px;position: absolute;bottom: 0px;transform: translateX(470%);z-index: 3;opacity: 0;}.img10 {height: 92px;position: absolute;bottom: -14.9px;transform: translateX(-11.7%);z-index: 4;}.img11 {width: 225px;height: 157px;position: absolute;bottom: -9px;transform: translateX(430%);z-index: 18;opacity: 0;}.img12 {width: 66px;height: 116px;position: absolute;bottom: -9px;transform: translateX(1670%);z-index: 18;opacity: 0;}.img13 {width: 307px;height: 129px;position: absolute;bottom: 7px;transform: translateX(220%);z-index: 5;}.img14 {width: 476px;height: 167px;position: absolute;bottom: -12px;transform: translateX(197%);z-index: 20;}.logo {position: absolute;z-index: 39;width: 185px;height: 88px;bottom: 10px;left: 6%;cursor: pointer;img {width: 100%;height: 100%;}}}
}
</style>

至于图片，得去b站自己扣了，因为第一次发这个，不知道在哪上传文件，每张图片我都加了备注，注意图片名字就好

人家的原版呢，是用的canvas来绘制的，然er这个东东我只会一点点，不知道在这里该怎么操作，就按自己理解的&&能够写出来的思路去写了，细节虽然达不到人家那样，但大体的效果是可以的，logo部分的问题暂时没想到什么解决方法，如果有大佬能够看到这里，求助~~！！

哔哩哔哩导航背景写法相关推荐

1. 仿写哔哩哔哩的头部导航部分（HTML+CSS静态）

   介绍 先来看看哔哩哔哩的头部导航部分效果,B站的头部导航背景图片使用的是动态叠加(变形和动画的效果),我们可以采用静态的图片的方式来实现背景图的部分 效果 来看看我的实现效果,是不是可以非常棒? 代码 ...

2. python 导航框 | 哔哩哔哩推荐100万收藏的导航网页

   import tkinter as tk import time from tkinter import * gwin=None import webbrowser def cmd(x): def i ...

3. android仿抽屉动画效果,Android之仿哔哩哔哩客户端首页+抽屉式导航

   本文使用Toobar+DrawerLayout+NavigationView仿哔哩哔哩客户端首页+抽屉式导航,同时实现了沉浸式状态栏的效果. 一.效果图 图片及图标色彩等没有刻意模仿,结构相同. 上图 ...

4. Drag,drag,drag！拽出哔哩哔哩侧边导航组件

   一.前言 文章主要以宏观的形式来聊哔哩哔哩侧边导航拖拽组件,非常适合正在渐进式学习VUE的你,适当的模仿开发项目是前端学习必须要有的技能.大多数人都知道的是,面试需要有自己的作品,而作品最重要的不是切 ...

5. 哔哩哔哩弹幕网站大数据分析研究背景

   哔哩哔哩(Bilibili)是一个普遍受欢迎的弹幕视频网站,它汇集了大量的用户生成内容,包括视频.评论.弹幕等.因此,对哔哩哔哩上的数据进行分析,有助于了解网络文化.用户行为和消费习惯等方面的信息.此 ...

6. 【Vue项目】仿哔哩哔哩网页

   一. 项目开发的背景 目前市面上,有一些以短视频为主的手机应用越来越多.如哔哩哔哩.抖音.小红书.快手.youtube,这些手机短视频软件应用,个人认为,之所以能拔地而起,主要是由于以下几点:1.门槛 ...

7. 小程序实战--仿bilibil（哔哩哔哩）小程序

   项目预览图 小程序?大改变? 之前就被朋友安利使用小程序,最近接近了小程序,发现了它竟然带来了一场"大革命". 简单说,它就是一个可以实现之前只能是原生态APP可以实现的效果和功能 ...

8. 超详细！模仿哔哩哔哩搭建静态网页

   Web静态页面开发实战学习总结 一.构思与前期准备 灵感来源于csdn博客上看到的其他人开发的模仿官方网站的开发文档,同时鉴于自己喜欢二次元的风格.决定自主设计出一个模仿哔哩哔哩·的低配版哔哩哔哩网页 ...

9. 哔哩哔哩Allen前端vue后台管理系统笔记

   哔哩哔哩Allen前端vue后台管理系统笔记 Element ui 引入 全局引入 按需引入 嵌套路由 左侧菜单栏的样式 Container布局,左侧菜单栏commonAside组件 commonAs ...

最新文章

1. 像素位移_1亿像素放大也清晰 OPPO Ace2超清四摄解析
2. 【转】对服务采购订单的条目确认
3. 使用CImage双缓冲
4. python运算符号输入_【Python】【运算符】
5. flex 正则表达式匹配规则
6. 工具篇：金蝶K3工具下载
7. Struts2面试题
8. python 普通克里金（Kriging）法
9. 微信如何查看是否被删好友，这4种方法简单快捷！
10. vue.js毕业设计，基于vue.js前后端分离教室预约系统（H5移动项目） 开题报告
11. WPF 实现圆形进度条
12. REDIS哨兵【Sentinel】模式+哨兵的核心知识点+redis哨兵主从切换的数据丢失问题+上一章铺垫的【异步复制数据丢失问题】+【集群脑裂】
13. 全国大学生数学建模竞赛2012A题葡萄酒的评价MATLAB程序
14. vscode设置背景护眼主题颜色、字体颜色不影响其他主题的颜色
15. PCIe4.0扩展坞设备
16. java基础改学C++（五）数组（2）字符串
17. 程序猿和攻城狮（南大）
18. 监控画面时间同步校准
19. 用友研究院院长吕建伟：阿里云正在从IBM商业模式走向AWS商业模式
20. 非对称加密与证书（上篇）

热门文章

1. 思科学院cisco-以太网概念
2. HTML插入FLASH的全兼容解决方案[主讲SWFObject方法]
3. 网络流量监控之网卡混杂模式
4. 网络安全菜鸟学习之漏洞篇——sql（一）
5. it's +时间+since/that/when/before句型用法的差别
6. 面试技巧之----反向面试
7. 装修日记 20050306 选择木地板
8. 示波器的三种触发模式详解
9. 搭建基于瓦片的离线地图应用
10. 计算机专业实训日志-python有关