* 蓝色警戒带（通常是黄黑相间或蓝白相间，这里按“蓝色”要求设计）在屏幕上飘动。
* 动画效果可以是左右飘动、上下浮动或波浪形起伏。
* 警戒带可以设计成条状、锯齿状或带文字（如“危险区域”、“禁止入内”）。- 音效：
- 循环播放的警报声（如“滴嘟滴嘟”声、蜂鸣声、警笛声）。
- 音量可调节。
- 可控制播放/暂停。
实现方案 (HTML + CSS + JavaScript)
这里提供一个完整的、可直接使用的网页代码示例，你可以根据需要调整样式和音效文件。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">蓝色警戒带动画带音乐版</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
background-color: #f0f0f0; /* 浅灰色背景 */
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
overflow: hidden; /* 防止滚动条 */
}
/* 警戒带容器 */
.tape-container {
position: relative;
width: 90%;
max-width: 800px;
height: 100px; /* 警戒带高度 */
overflow: hidden;
}
/* 单条警戒带 */
.tape {
position: absolute;
width: 200%; /* 宽度是容器的两倍，用于循环移动 */
height: 100%;
background-image: repeating-linear-gradient(
45deg, /* 斜向条纹 */
#0066cc, /* 蓝色 */
#0066cc 20px,
#ffffff 20px, /* 白色条纹 */
#ffffff 40px
);
animation: tapeFlow 3s linear infinite; /* 动画：持续3秒，线性，无限循环 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
}
/* 警戒带飘动动画 */
@keyframes tapeFlow {
0% {
transform: translateX(0); /* 初始位置 */
}
100% {
transform: translateX(-50%); /* 向左移动自身宽度的一半，形成循环 */
}
}
/* 可选：添加文字叠加 */
.warning-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #ffffff;
font-size: 2em;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* 文字阴影增强可读性 */
z-index: 10; /* 确保文字在警戒带上方 */
pointer-events: none; /* 防止文字阻挡点击 */
}
/* 控制面板 */
.controls {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(255, 255, 255, 0.9);
padding: 15px 25px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
gap: 15px;
}
.controls button {
padding: 8px 16px;
font-size: 16px;
border: none;
border-radius: 5px;
background-color: #0066cc;
color: white;
cursor: pointer;
transition: background-color 0.3s;
}
.controls button:hover {
background-color: #0052a3;
}
.controls button:active {
transform: scale(0.95);
}
.volume-control {
display: flex;
align-items: center;
gap: 10px;
}
.volume-control input[type="range"] {
width: 100px;
}
/* 响应式调整 */
@media (max-width: 600px) {
.tape-container {
height: 80px;
}
.warning-text {
font-size: 1.5em;
}
.controls {
flex-direction: column;
gap: 10px;
padding: 10px 15px;
}
}
</style>
</head>
<body>
<div class="tape-container">
<div class="tape"></div>
<div class="warning-text">危险区域</div> <!-- 可选文字 -->
</div>
<div class="controls">
<button id="playPauseBtn">播放音效</button>
<div class="volume-control">
<label for="volumeSlider">音量:</label>
<input type="range" id="volumeSlider" min="0" max="100" value="50">
<span id="volumeValue">50%</span>
</div>
</div>
<script>
// 音频相关
const audio = new Audio('alert-sound.mp3'); // 替换为你的音效文件路径
audio.loop = true; // 循环播放
audio.volume = 0.5; // 初始音量 (0.0 - 1.0)
// 控制元素
const playPauseBtn = document.getElementById('playPauseBtn');
const volumeSlider = document.getElementById('volumeSlider');
const volumeValue = document.getElementById('volumeValue');
// 播放/暂停按钮功能
playPauseBtn.addEventListener('click', () => {
if (audio.paused) {
audio.play().catch(error => {
console.error("播放音频失败:", error);
alert("音频播放失败，请检查文件路径或浏览器权限。");
});
playPauseBtn.textContent = '暂停音效';
} else {
audio.pause();
playPauseBtn.textContent = '播放音效';
}
});
// 音量控制
volumeSlider.addEventListener('input', () => {
const volume = volumeSlider.value / 100;
audio.volume = volume;
volumeValue.textContent = `${volumeSlider.value}%`;
});
// 页面加载时尝试预加载音频（可选）
window.addEventListener('load', () => {
audio.load(); // 预加载音频文件
});
// 可选：当用户与页面交互后自动播放（解决浏览器自动播放策略）
document.addEventListener('click', () => {
if (audio.paused && playPauseBtn.textContent === '播放音效') {
// 用户点击页面后，如果音效是暂停状态，可以自动播放（但通常需要用户明确操作）
// 这里保持需要用户点击按钮播放
}
},
转载请说明出处
蓝警之家 » 蓝色警戒带动画带音乐版，1. 视觉动画
蓝警之家 » 蓝色警戒带动画带音乐版，1. 视觉动画
