B站首页头部动画

19天前•分类

77 0

今天在浏览 B 站时，被其首页顶部的动画设计吸引。滚动时的背景渐变、悬浮元素的波浪动效与导航栏的交互细节，不仅增强了页面层次感，还展现出流畅的视觉韵律。作为前端开发者，我尝试通过 HTML、CSS 和 JavaScript 复刻这一设计，在实现过程中深入分析了动画原理与交互逻辑。下面将分享我的实现思路和完整代码。

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Banner</title>
        <link href="autumn.css" rel="stylesheet" />
    </head>
    <body>
<div class="blqbanner mobile-hidden">
    <div><img src="./bilibili-autumn-1.png"></div>
    <div><img src="./bilibili-autumn-2.png"></div>
    <div><img src="./bilibili-autumn-3.png"></div>
    <div><img src="./bilibili-autumn-4.png"></div>
    <div><img src="./bilibili-autumn-5.png"></div>
    <div><img src="./bilibili-autumn-6.png"></div>
</div>
</body>
<script src="autumn.js"></script>

</html>

autumn.css


.blqbanner {
    height: 160px;
    position: relative;
    overflow: hidden;
}

.blqbanner > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    --offset:0px;
    --blur:2px;
}

.blqbanner > div > img {
    display: flex;
    width: 110%;
    height: 100%;
    object-fit: cover;
    transform:translateX(var(--offset));
    filter:blur(var(--blur));
}

autumn.js

const images = document.querySelectorAll('.blqbanner>div>img');
document.querySelector('.blqbanner').addEventListener('mousemove', (e) => {
    let percentage = e.clientX / window.outerWidth;
//    设置鼠标移动百分比
    let offset = 10 * percentage;
//    定义offset，定义分层图片位置的距离
    let blur = 20;
    for (let [index, image] of images.entries()) {
        offset *= 1.3;
        //    越后面的图片，位移的越多
        //    鼠标在中间，第三章和第四张图的模糊度最低，趋近于0；第2张和第5张模糊度较高，第1张和第6张模糊度最高；
        //    鼠标在右边，第六张图模糊度趋近于0，越往左的图片，模糊度越高；使用公式：y = x**2*20
        let blurValue = Math.pow((index / images.length - percentage), 2) * blur;
        image.style.setProperty('--offset', `${offset}px`);
        image.style.setProperty('--blur', `${blurValue}px`);
    }
});

最后更新 2025-05-13