蓝色警戒带动画带音乐版，方案一，纯CSS动画 + 音效（最简单，适合网页嵌入）

HTML 结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蓝色警戒带动画带音乐</title>
    <style>
        /* 基础样式 */
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0; /* 背景色 */
            overflow: hidden;
        }
        /* 警戒带容器 */
        .caution-tape-container {
            position: relative;
            width: 80vw; /* 视口宽度的80% */
            height: 150px; /* 高度 */
            overflow: hidden;
        }
        /* 警戒带主体 */
        .caution-tape {
            position: absolute;
            width: 200%; /* 宽度翻倍用于无缝滚动 */
            height: 100%;
            background: repeating-linear-gradient(
                45deg, /* 45度角斜纹 */
                #0066cc, /* 蓝色 */
                #0066cc 20px,
                #ffffff 20px, /* 白色条纹 */
                #ffffff 40px
            );
            animation: scrollTape 2s linear infinite; /* 滚动动画 */
            box-shadow: 0 0 20px rgba(0, 102, 204, 0.6); /* 发光效果 */
        }
        /* 滚动动画关键帧 */
        @keyframes scrollTape {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-50%); /* 移动自身宽度的一半，实现无缝循环 */
            }
        }
        /* 可选：文字叠加 */
        .warning-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #ffffff;
            font-family: Arial, sans-serif;
            font-size: 2em;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            pointer-events: none; /* 防止文字阻挡点击 */
            z-index: 10; /* 确保在警戒带之上 */
        }
        /* 音频控制按钮（可选） */
        .audio-control {
            position: absolute;
            top: 20px;
            right: 20px;
            padding: 10px 15px;
            background-color: #0066cc;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="caution-tape-container">
        <div class="caution-tape"></div>
        <div class="warning-text">危险区域 请勿靠近</div>
    </div>
    <!-- 音频元素 -->
    <audio id="cautionSound" loop>
        <!-- 替换为你的音效文件路径 -->
        <source src="path/to/your/caution-beep.mp3" type="audio/mpeg">
        <!-- 备用格式 -->
        <source src="path/to/your/caution-beep.ogg" type="audio/ogg">
        您的浏览器不支持音频元素。
    </audio>
    <!-- 音频控制按钮 -->
    <button class="audio-control" id="toggleAudio">🔊 音效</button>
    <script>
        // 音频控制
        const audio = document.getElementById('cautionSound');
        const toggleBtn = document.getElementById('toggleAudio');
        let isPlaying = false;
        toggleBtn.addEventListener('click', () => {
            if (isPlaying) {
                audio.pause();
                toggleBtn.textContent = '🔊 音效';
            } else {
                audio.play().catch(e => console.log("音频播放失败:", e)); // 处理自动播放策略
                toggleBtn.textContent = '🔇 静音';
            }
            isPlaying = !isPlaying;
        });
        // 可选：页面加载后自动播放音效（注意浏览器自动播放策略限制）
        // window.addEventListener('load', () => {
        //     audio.play().catch(e => console.log("自动播放失败:", e));
        // });
    </script>
</body>
</html>

关键点说明：
- CSS动画： 使用 repeating-linear-gradient 创建蓝白斜条纹图案。animation: scrollTape 2s linear infinite; 让它以恒定速度水平滚动。transform: translateX(-50%) 实现无缝循环（因为宽度是200%）。
- 发光效果： box-shadow 增加视觉冲击力。
- 文字叠加： 使用绝对定位将警示文字居中显示在警戒带上。
- 音效： 使用HTML5 <audio> 标签循环播放一个简短的警示音效（如“嘀嘀”声、警报声、心跳声等）。loop 属性让它持续播放。
- 音频控制： 添加一个按钮让用户可以开启/关闭音效（受浏览器自动播放策略限制，可能需要用户交互才能播放）。
- 音乐： 如果需要背景音乐（而非循环音效），可以替换音效文件为一段舒缓但略带紧张感的背景音乐（如电子脉冲音、低沉的嗡嗡声、环境音效等），同样使用 <audio loop>。
音乐/音效建议：
- 音效： 寻找简短、重复、有节奏感的警示音效，关键词：alert beep, warning tone, siren short, heartbeat pulse, danger sound effect，免费资源：Freesound.org, Zapsplat.com。
- 背景音乐： 选择低沉、持续、不干扰主要信息的音效或音乐片段，关键词：ambient tension, electronic drone, ominous background, suspenseful pad，避免有强烈旋律或歌词的音乐,以免分散注意力。

CSS动画 + JavaScript控制 + 更复杂音效（更灵活）

HTML 结构： 基本同方案一，但可以增加更多控制元素（如速度调节、闪烁开关）。
CSS： 同方案一。

JavaScript 增强：

const audio = document.getElementById('cautionSound');
const toggleBtn = document.getElementById('toggleAudio');
const speedSlider = document.getElementById('speedSlider'); // 假设添加了速度滑块
const blinkCheckbox = document.getElementById('blinkCheckbox'); // 假设添加了闪烁复选框
const tape = document.querySelector('.caution-tape');
let isPlaying = false;
// 音频控制
toggleBtn.addEventListener('click', () => {
    if (isPlaying) {
        audio.pause();
        toggleBtn.textContent = '🔊 音效';

转载请说明出处
蓝警之家 » 蓝色警戒带动画带音乐版，方案一，纯CSS动画 + 音效（最简单，适合网页嵌入）

蓝警之家

分享到：

CSS动画 + JavaScript控制 + 更复杂音效（更灵活）

蓝警之家

发表评论

蓝色警戒主题网站！