给你的网站加上横幅广告淡入淡出特效代码-QQ沐编程

特效介绍

在网站首页添加顶部添加广告横幅，而且只是显示一会就消失了，不影响整体布局，可以用来做网站公告提示，或者用来节日庆祝等等，根据自己的情况来即可，代码为html源码，且代码量很少，修改很简单，可以自行修改文字显示，还有淡入显示和显示淡出消失的时间，代码里面已经加上注释了，小白也可以看懂

效果截图

代码如下

<!DOCTYPE html>
<html>
<head>
    <style>
        #announcement-banner {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: red;
            color: yellow;
            text-align: center;
            padding: 15px 0;
            font-size: 30px;
            font-weight: bold;
            z-index: 9999;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            letter-spacing: 0.5em;
            opacity: 0; /* 初始透明度为0（完全透明） */
            transition: opacity 0.5s ease-in-out; /* 淡入淡出动画 */
        }
    </style>
</head>
<body>
    <div id="announcement-banner">
        八一建军节快乐！祝愿祖国繁荣昌盛！
    </div>

    <script>
        window.onload = function() {
            var banner = document.getElementById('announcement-banner');
            
            // 淡入效果（显示横幅）
            setTimeout(function() {
                banner.style.opacity = '1'; // 完全不透明（显示）
            }, 100); // 延迟100ms确保DOM加载完成
            
            // 3秒后淡出并移除横幅
            setTimeout(function() {
                banner.style.opacity = '0'; // 完全透明（淡出）
                
                // 淡出动画结束后移除元素
                setTimeout(function() {
                    banner.style.display = 'none';
                }, 800); // 等待淡出动画完成（0.5s）
            }, 4000);
        };
    </script>
</body>
</html>

本站资源来自互联网收集，仅供用于学习和交流，请勿用于商业用途。如有侵权、不妥之处，请联系站长并出示版权证明以便删除。敬请谅解！

THE END