警车红蓝闪烁警灯桌面页面HTML代码实现

好的，我将为你提供一个完整的HTML桌面页面代码，满足以下需求： - **整体宽度1200px**（居中显示） - **横向布局**（使用Flexbox） - **警车红蓝警灯闪烁效果**（CSS动画） ## 🚔 完整桌面页面代码（HTML + 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> /* 全局重置 & 基础样式 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #0b0e14; /* 深色衬托警灯 */ display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: Arial, sans-serif; } /* 主容器：整体宽度1200px，横向布局 */ .desktop-container { width: 1200px; max-width: 100%; /* 移动端自适应 */ background: #1e2229; border-radius: 16px; padding: 30px 40px; box-shadow: 0 12px 30px rgba(0,0,0,0.6); display: flex; /* 横向布局 */ flex-direction: row; flex-wrap: wrap; /* 允许换行，保持响应式 */ gap: 20px; /* 模块间距 */ align-items: flex-start; /* 顶部对齐 */ color: #ffffff; } /* 左侧区域：警灯 + 警车标识 */ .left-panel { flex: 1 1 300px; /* 基础宽度300，可伸缩 */ min-width: 250px; display: flex; flex-direction: column; align-items: center; gap: 24px; } /* 右侧区域：功能模块或内容 */ .right-panel { flex: 2 1 600px; /* 占更多宽度 */ min-width: 300px; display: flex; flex-direction: column; gap: 20px; } /* ---------- 警灯组件 ---------- */ .police-light { width: 200px; height: 60px; background: #2a2a2a; border-radius: 30px; display: flex; justify-content: center; align-items: center; gap: 30px; box-shadow: 0 4px 12px rgba(0,0,0,0.5); padding: 0 20px; position: relative; } /* 红灯 */ .light-red { width: 50px; height: 50px; border-radius: 50%; background: red; animation: flash-red 0.8s infinite alternate; box-shadow: 0 0 20px 6px rgba(255, 0, 0, 0.6); } /* 蓝灯 */ .light-blue { width: 50px; height: 50px; border-radius: 50%; background: blue; animation: flash-blue 0.8s infinite alternate; box-shadow: 0 0 20px 6px rgba(0, 0, 255, 0.6); } /* 闪烁动画：红灯亮、蓝灯暗，交替进行 */ @keyframes flash-red { 0% { opacity: 1; transform: scale(1); box-shadow: 0 0 30px 10px rgba(255, 0, 0, 0.9); } 100% { opacity: 0.2; transform: scale(0.95); box-shadow: 0 0 8px 2px rgba(255, 0, 0, 0.2); } } @keyframes flash-blue { 0% { opacity: 0.2; transform: scale(0.95); box-shadow: 0 0 8px 2px rgba(0, 0, 255, 0.2); } 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 30px 10px rgba(0, 0, 255, 0.9); } } /* 警车文字标识 */ .police-badge { font-size: 22px; font-weight: bold; letter-spacing: 6px; background: #2c3e50; padding: 8px 20px; border-radius: 8px; color: #f1c40f; text-transform: uppercase; border: 2px solid #f1c40f; } /* ---------- 右侧内容模块 ---------- */ .info-card { background: #2d3441; border-radius: 12px; padding: 16px 24px; box-shadow: 0 4px 8px rgba(0,0,0,0.3); border-left: 5px solid #3498db; } .info-card h3 { margin-bottom: 8px; color: #ecf0f1; font-size: 18px; } .info-card p { color: #b0bccf; line-height: 1.6; font-size: 15px; } .button-group { display: flex; gap: 12px; flex-wrap: wrap; } .btn { background: #2980b9; border: none; color: white; padding: 10px 24px; border-radius: 8px; cursor: pointer; font-size: 15px; transition: background 0.2s, transform 0.1s; box-shadow: 0 4px 6px rgba(0,0,0,0.3); } .btn:hover { background: #1c6ea4; transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-alert { background: #e74c3c; } .btn-alert:hover { background: #c0392b; } /* 底部状态条 */ .status-bar { margin-top: 16px; padding: 12px 20px; background: #1a1f27; border-radius: 8px; font-size: 14px; color: #8fa3bf; display: flex; justify-content: space-between; align-items: center; } .status-bar .badge { background: #27ae60; padding: 4px 12px; border-radius: 20px; color: white; font-size: 12px; font-weight: bold; } /* 响应式：窄屏时堆叠 */ @media (max-width: 768px) { .desktop-container { width: 100%; padding: 20px; flex-direction: column; } .left-panel, .right-panel { flex: 1 1 100%; } .police-light { width: 160px; height: 50px; } .light-red, .light-blue { width: 40px; height: 40px; } } </style> </head> <body> <div class="desktop-container">  <div class="left-panel"> <div class="police-light"> <div class="light-red"></div> <div class="light-blue"></div> </div> <div class="police-badge">🚔 巡警</div> <p style="color:#8899aa; font-size: 14px; text-align: center; margin-top: -8px;"> 红蓝交替闪烁 </p> </div>  <div class="right-panel"> <div class="info-card"> <h3>📋 警情简报</h3> <p>当前区域内治安平稳，无异常事件。如有需要，请点击下方按钮触发警报测试。</p> <div class="button-group" style="margin-top: 12px;"> <button class="btn">📡 刷新数据</button> <button class="btn btn-alert">🔴 模拟警报</button> <button class="btn" style="background:#2c3e50;">⚙️ 设置</button> </div> </div> <div class="info-card"> <h3>📍 最近巡逻记录</h3> <p>2025-03-21 14:32 · 中央大街与建设路交叉口 <span style="color:#e67e22;">(已处理)</span></p> <p>2025-03-21 13:15 · 滨河公园停车场 <span style="color:#2ecc71;">(无异常)</span></p> <p>2025-03-21 11:40 · 永安小区东门 <span style="color:#e74c3c;">⚠️ 需要关注</span></p> </div> <div class="status-bar"> <span>🕐 系统运行中 · 警灯正常</span> <span class="badge">在线</span> </div> </div> </div> </body> </html> ``` --- ## 📐 布局说明 | 区域 | 宽度/比例 | 作用 | |------|-----------|------| | `.desktop-container` | `1200px`，居中 | 主容器，横向Flex布局 | | `.left-panel` | `flex: 1 1 300px`（可伸缩） | 放置警车警灯 + 标识 | | `.right-panel` | `flex: 2 1 600px`（占更多空间） | 放置信息卡片、按钮、状态条 | | 响应式 | 屏幕 < 768px 时变为纵向 | 保证手机和平板可用 | --- ## 🚨 警灯闪烁实现细节 - **红蓝两灯**各自独立 `<div>`，使用 **`animation`** 交替改变 `opacity` 和 `box-shadow`。 - `flash-red` 动画：从 **亮 (opacity:1)** → **暗 (opacity:0.2)**，持续 0.8s，循环。 - `flash-blue` 动画：与红灯 **相位相反**，红灯亮时蓝灯暗，达到交替闪烁效果。 - **发光效果**通过 `box-shadow` 实现，真实感更强。 > 你可以调整 `@keyframes` 中的 `0.8s` 来改变闪烁速度，数值越小闪烁越快。 --- ## 🛠 开发建议 1. **代码复用**：将警灯组件封装成一个可复用的类或 Vue/React 组件，便于多个页面使用。 2. **性能优化**：闪烁动画使用 `transform` 和 `opacity`（GPU加速），避免使用 `left/top/width/height` 等触发重排的属性。 3. **无障碍访问**：为动画添加 `prefers-reduced-motion` 媒体查询，对不喜欢动画的用户可关闭闪烁。 4. **安全方面**：如果页面涉及真实警报功能，按钮操作务必加上防抖/节流，避免重复触发。 5. **浏览器兼容**：`flex` 和 `@keyframes` 在主流现代浏览器中均已良好支持，如需兼容 IE11 可添加 `-webkit-` 前缀。 --- ## 🔗 学习资源建议 - [MDN CSS Flexbox 完整指南](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout) - [CSS 动画最佳实践 (Google Developers)](https://web.dev/articles/animations-guide) - [Box-shadow 生成器 (CSSmatic)](https://www.cssmatic.com/box-shadow) — 快速设计发光效果 --- ######[AI写代码神器 | 2820点数解答 | 2026-06-09 22:22:12]

服务商

更多选项

快捷项

自定义