html+css渐变顶部框

效果

当用户向下滚动页面时，顶部框的背景颜色会逐渐从透明过渡到 一种颜色。这种效果可以使页面更具动态感。

初始透明

滚动后

html

<!-- 渐变顶部框 -->
    <div class="top-box" id="topBox">
        渐变顶部框
    </div>

    <img class="img1" src="https://img1.baidu.com/it/u=1535232938,2370569369&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800">

    <div style="padding: 100px 20px;">
        <p>滚动页面时顶部框的背景色会发生变化。</p>
        <p>这里是一些占位内容，用于展示滚动效果...</p>
    </div>

css

  body {
            margin: 0;
            font-family: Arial, sans-serif;
        }

        .img1{
            width: 100%;
            height: 100%;
        }

        .top-box {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 50px;
            background-color: rgba(0, 0, 0, 0);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            transition: background-color 0.3s ease;
            z-index: 1000;
        }

js

   // 监听滚动事件
        window.addEventListener('scroll', function() {
            var topBox = document.getElementById('topBox');
            var scrollPosition = window.scrollY || document.documentElement.scrollTop;
            
            // 根据滚动距离计算透明度
            var opacity = Math.min(scrollPosition / 300, 0.85);
            topBox.style.backgroundColor = 'rgba(0, 0, 0, ' + opacity + ')';
        });