HTML&CSS：动态歌词高亮展示效果

这个 HTML 文件实现了一个带有动态视觉效果的歌词滚动页面，核心特点是随着用户滚动，歌词会根据其在视口中央的位置呈现不同的透明度，创造出聚焦当前歌词的沉浸式体验。

大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。

演示效果

HTML&CSS

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>歌词滚动效果</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body {
            font-family: 'Inter', sans-serif;
            color: #ffffff;
            overflow: hidden;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: url('https://picsum.photos/id/33/1920/1080');
        }

        .lyric-container {
            position: relative;
            width: 80%;
            max-width: 600px;
            height: 100vh;
            overflow-y: scroll;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .lyric-container::-webkit-scrollbar {
            display: none;
        }

        .lyric-line {
            text-align: center;
            font-size: 1.5rem;
            line-height: 2.5rem;
            transition: opacity 0.2s ease-out;
            will-change: opacity;
            padding: 0.5rem 0;
            white-space: nowrap;
        }
    </style>
</head>

<body>
    <body class="bg-gray-900 text-white flex items-center justify-center p-4">
        <div class="lyric-container rounded-lg">
            <div class="p-8">
                <div class="lyric-line">I see the world in different colors now</div>
                <div class="lyric-line">The sky's a shade I've never known</div>
                <div class="lyric-line">The city lights are painted gold and red</div>
                <div class="lyric-line">And every street feels like a different home</div>
                <div class="lyric-line"></div>
                <div class="lyric-line">Oh, this feeling, it's a symphony</div>
                <div class="lyric-line">A melody of light and sound</div>
                <div class="lyric-line">I'm floating on a cloud of silent dreams</div>
                <div class="lyric-line">With no one else for miles around</div>
                <div class="lyric-line"></div>
                <div class="lyric-line">It's a new day, a new start</div>
                <div class="lyric-line">A canvas waiting for a brush</div>
                <div class="lyric-line">I'm running free, a work of art</div>
                <div class="lyric-line">In this beautiful, chaotic rush</div>
                <div class="lyric-line"></div>
                <div class="lyric-line">Let's find a rhythm, a steady beat</div>
                <div class="lyric-line">That guides us through the tangled ways</div>
                <div class="lyric-line">And makes these moments bittersweet</div>
                <div class="lyric-line">The best of all our fleeting days</div>
                <div class="lyric-line"></div>
                <div class="lyric-line">I see the world in different colors now</div>
                <div class="lyric-line">The sky's a shade I've never known</div>
                <div class="lyric-line">The city lights are painted gold and red</div>
                <div class="lyric-line">And every street feels like a different home</div>
                <div class="lyric-line"></div>
                <div class="lyric-line">Oh, this feeling, it's a symphony</div>
                <div class="lyric-line">A melody of light and sound</div>
                <div class="lyric-line">I'm floating on a cloud of silent dreams</div>
                <div class="lyric-line">With no one else for miles around</div>
                <div class="lyric-line"></div>
                <div class="lyric-line">It's a new day, a new start</div>
                <div class="lyric-line">A canvas waiting for a brush</div>
                <div class="lyric-line">I'm running free, a work of art</div>
                <div class="lyric-line">In this beautiful, chaotic rush</div>
                <div class="lyric-line"></div>
                <div class="lyric-line">Let's find a rhythm, a steady beat</div>
                <div class="lyric-line">That guides us through the tangled ways</div>
                <div class="lyric-line">And makes these moments bittersweet</div>
                <div class="lyric-line">The best of all our fleeting days</div>
                <div class="lyric-line"></div>
                <div class="lyric-line">I see the world in different colors now</div>
                <div class="lyric-line">The sky's a shade I've never known</div>
                <div class="lyric-line">The city lights are painted gold and red</div>
                <div class="lyric-line">And every street feels like a different home</div>
                <div class="lyric-line"></div>
                <div class="lyric-line">Oh, this feeling, it's a symphony</div>
                <div class="lyric-line">A melody of light and sound</div>
                <div class="lyric-line">I'm floating on a cloud of silent dreams</div>
                <div class="lyric-line">With no one else for miles around</div>
            </div>
        </div>

        <script>
            document.addEventListener('DOMContentLoaded', () => {
                const lyricContainer = document.querySelector('.lyric-container');
                const lyricLines = document.querySelectorAll('.lyric-line');
                lyricContainer.addEventListener('scroll', () => {
                    const containerTop = lyricContainer.scrollTop;
                    const containerHeight = lyricContainer.clientHeight;
                    const containerCenter = containerTop + containerHeight / 2;
                    lyricLines.forEach(line => {
                        const lineTop = line.offsetTop;
                        const lineHeight = line.clientHeight;
                        const lineCenter = lineTop + lineHeight / 2;
                        const distance = Math.abs(containerCenter - lineCenter);
                        const maxDistance = containerHeight * 0.4;
                        const opacity = Math.min(1.0, Math.max(0.2, distance / maxDistance));
                        const finalOpacity = 1.0 - (opacity * 1.0);
                        line.style.opacity = finalOpacity;
                    });
                });

                window.addEventListener('load', () => {
                    lyricContainer.dispatchEvent(new Event('scroll'));
                });
            });
        </script>
    </body>

</html>

HTML

lyric-container：歌词容器，提供滚动区域
p-8：内边距容器，美化歌词布局
lyric-line：单个歌词行容器，每个元素代表一句歌词

CSS

body：使用 Inter 字体，白色文字，隐藏溢出内容，通过 flex 布局使内容居中；设置背景图片，营造沉浸式氛围
背景图片使用 picsum.photos 提供的示例图片，尺寸为 1920×1080
.lyric-container：设置相对定位，宽度为 80%（最大 600px），高度为整个视口高度；启用垂直滚动并隐藏滚动条，提供干净的视觉体验
多种浏览器兼容方案隐藏滚动条（scrollbar-width: none、-ms-overflow-style: none、::-webkit-scrollbar）
.lyric-line：文字居中对齐，字体大小 1.5rem，行高 2.5rem；设置透明度过渡动画（0.2 秒），优化视觉体验；添加内边距，防止歌词过于拥挤；white-space: nowrap 确保歌词不换行

JavaScript

DOM 加载完成事件：

javascript 复制代码

运行
document.addEventListener('DOMContentLoaded', () => { ... })

确保页面元素加载完成后再执行脚本

获取元素引用：

获取歌词容器 (lyricContainer) 和所有歌词行 (lyricLines)

滚动事件监听：

当用户滚动歌词容器时触发处理函数计算容器顶部位置、容器高度和容器中心点位置遍历每一行歌词，计算其位置与容器中心点的距离

透明度计算逻辑：

计算每行歌词中心与容器中心的距离设定最大影响距离为容器高度的 40% 根据距离计算透明度：越靠近中心的歌词透明度越高（最高 1.0），越远的歌词透明度越低（最低 0.2）应用计算出的透明度到对应的歌词行

初始触发：

页面加载完成后手动触发一次滚动事件，确保初始状态正确显示

各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！