B站顶部banner实现
2581次阅读
134人点赞
发布时间: 2024-02-06 16:09:19
扫码到手机查看
![]()
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.animated-banner {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}
.animated-banner>.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;
}
img {
vertical-align: middle;
border-style: none;
}
.bili-banner {
margin: 0 auto;
position: relative;
z-index: 0;
min-height: 155px;
height: 9.375vw;
min-width: 999px;
background-color: #f9f9f9;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
background-repeat: no-repeat;
background-position: center 0;
background-size: cover;
}
</style>
</head>
<body>
<div class="bili-banner" onmousemove="bigImg(event)">
<div class="animated-banner">
<div class="layer">
<img src="https://i0.hdslb.com/bfs/vc/8e084d67aa18ed9c42dce043e06e16b79cbb50ef.png"
style="filter: blur(4px); transform: translate(0px, 0px) rotate(0deg);" height="259" width="3116">
</div>
<div class="layer">
<img src="https://i0.hdslb.com/bfs/vc/f1892bc119b722c3cda5b26269c292a90a9f5f06.png"
style="transform: translate(0px, 0px) rotate(0deg); filter: blur(0px);" height="171" width="1869">
</div>
<div class="layer">
<img src="https://i0.hdslb.com/bfs/vc/dbd5c17c4315714de9e4ee119694d2e9efaf9639.png"
style="transform: translate(-51.9355px, 0px) rotate(0deg); filter: blur(1px);" height="259"
width="3116">
</div>
<div class="layer">
<img src="https://i0.hdslb.com/bfs/vc/cd9be0a2716adbae85fd899259381c4b2c2893c7.png"
style="transform: translate(0px, 4.36258px) rotate(0deg); filter: blur(4px);" height="155"
width="1869">
</div>
<div class="layer">
<img src="https://i0.hdslb.com/bfs/vc/88537437a7916ecde847fa46652b44fbd3cbbb06.png"
style="transform: translate(0px, -1.86968px) rotate(0deg); filter: blur(5px);" height="171"
width="1869">
</div>
<div class="layer">
<img src="https://i0.hdslb.com/bfs/vc/37d9a93baa55870506a6f3e6308e7a0c386b97c7.png"
style="filter: blur(6px); transform: translate(0px, 0px) rotate(0deg);" height="185" width="2025">
</div>
</div>
</div>
<script>
let layer0 = document.getElementsByTagName("img")[0];
let layer1 = document.getElementsByTagName("img")[1];
let layer2 = document.getElementsByTagName("img")[2];
let layer3 = document.getElementsByTagName("img")[3];
let layer4 = document.getElementsByTagName("img")[4];
let layer5 = document.getElementsByTagName("img")[5];
//眨眼
console.log(layer1);
console.log(layer1.src);
function zhayan(){
layer1.src = 'https://i0.hdslb.com/bfs/vc/082e39ef757826401ef82da818310d42e05bc2de.png';
}
setInterval(zhayan(),500)
// https://i0.hdslb.com/bfs/vc/082e39ef757826401ef82da818310d42e05bc2de.png
// layer0.style.filter = 'blur(3px)'; 修改blur
function bigImg(event){
// 拿到盒子的X轴坐标
var x = event.clientX;
// console.log(x);
layer0.style.filter = `blur(${0.00425*x}px)`;
layer1.style.transform = `translate(${0.00425*x}px,0px)`;
layer1.style.filter = `blur(${0.00425*x}px)`;
layer2.style.transform = `translate(${-51+0.016*x}px,0px)`;
layer2.style.filter = `blur(${0.00215*x}px)`;
layer3.style.transform = `translate(${0.016*x}px,4.36258px)`;
layer3.style.filter = `blur(${4-0.00215*x}px)`;
layer4.style.transform = `translate(${0.035*x}px,-1.86968px)`;
layer4.style.filter = `blur(${5-0.00315*x}px)`;
layer5.style.transform = `translate(${0.035*x}px,0)`;
layer5.style.filter = `blur(${6-0.00215*x}px)`;
// console.log(layer4);
// console.log(layer0);
}
</script>
</body>
</html>
目录