HTML弹幕效果实现
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML5弹幕效果实现</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; } body { background: linear-gradient(135deg, #1a1a2e, #16213e); color: #e6e6e6; min-height: 100vh; padding: 20px; overflow-x: hidden; } .container { max-width: 1200px; margin: 0 auto; } header { text-align: center; padding: 30px 0; margin-bottom: 30px; } h1 { font-size: 3.5rem; background: linear-gradient(90deg, #ff8a00, #e52e71, #00c3ff); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 10px; text-shadow: 0 0 15px rgba(255, 138, 0, 0.3); } .subtitle { font-size: 1.2rem; opacity: 0.8; max-width: 700px; margin: 0 auto; line-height: 1.6; } .main-content { display: flex; gap: 30px; margin-bottom: 40px; } .video-container { flex: 3; position: relative; height: 500px; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); background: linear-gradient(45deg, #0f3460, #1a1a2e); border: 1px solid rgba(255, 255, 255, 0.1); } .video-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 20px; text-align: center; z-index: 1; } .video-placeholder h2 { font-size: 2rem; margin-bottom: 20px; color: #fff; text-shadow: 0 0 10px rgba(0, 195, 255, 0.7); } .video-placeholder p { max-width: 600px; font-size: 1.1rem; line-height: 1.6; opacity: 0.9; } .danmu-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 2; } .danmu { position: absolute; white-space: nowrap; font-size: 22px; font-weight: bold; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); pointer-events: none; user-select: none; animation-timing-function: linear; animation-fill-mode: forwards; } .control-panel { flex: 2; background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 25px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); } .panel-title { font-size: 1.8rem; margin-bottom: 20px; color: #00c3ff; text-align: center; } .form-group { margin-bottom: 20px; } label { display: block; margin-bottom: 8px; font-size: 1.1rem; color: #e6e6e6; } input, select, button { width: 100%; padding: 12px 15px; border-radius: 8px; border: none; background: rgba(0, 0, 0, 0.3); color: white; font-size: 1rem; transition: all 0.3s ease; } input:focus, select:focus { outline: none; box-shadow: 0 0 0 2px #00c3ff; } button { background: linear-gradient(90deg, #00c3ff, #00a2ff); color: white; font-weight: bold; cursor: pointer; margin-top: 5px; letter-spacing: 1px; text-transform: uppercase; font-size: 1.1rem; border: none; transition: all 0.3s ease; } button:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0, 195, 255, 0.4); } .history-panel { background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 25px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); } .history-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .history-title h3 { font-size: 1.5rem; color: #00c3ff; } .history-list { max-height: 200px; overflow-y: auto; padding-right: 10px; } .history-item { padding: 12px 15px; background: rgba(0, 0, 0, 0.2); border-radius: 8px; margin-bottom: 10px; display: flex; align-items: center; transition: all 0.3s ease; cursor: pointer; } .history-item:hover { background: rgba(0, 195, 255, 0.2); transform: translateX(5px); } .history-color { width: 20px; height: 20px; border-radius: 50%; margin-right: 15px; flex-shrink: 0; } .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; margin-top: 40px; } .feature-card { background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 25px; border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; } .feature-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4); } .feature-card h3 { font-size: 1.5rem; color: #ff8a00; margin-bottom: 15px; display: flex; align-items: center; } .feature-card h3 i { margin-right: 12px; font-size: 1.8rem; } .feature-card p { line-height: 1.7; color: #cccccc; } .how-to { margin-top: 40px; padding: 30px; background: rgba(0, 0, 0, 0.2); border-radius: 12px; } .how-to h2 { text-align: center; font-size: 2rem; margin-bottom: 30px; color: #e52e71; } .steps { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; } .step { width: 280px; padding: 25px; background: rgba(26, 26, 46, 0.8); border-radius: 12px; position: relative; counter-increment: step-counter; } .step:before { content: counter(step-counter); position: absolute; top: -15px; left: -15px; width: 40px; height: 40px; background: #00c3ff; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.3rem; box-shadow: 0 5px 15px rgba(0, 195, 255, 0.5); } .step h3 { margin-bottom: 15px; color: #ff8a00; } .step p { line-height: 1.6; color: #cccccc; } footer { text-align: center; padding: 30px 0; margin-top: 50px; border-top: 1px solid rgba(255, 255, 255, 0.1); color: #999; } @media (max-width: 900px) { .main-content { flex-direction: column; } } /* 弹幕动画 */ @keyframes danmu-move { from { transform: translateX(100%); } to { transform: translateX(-100%); } } @keyframes danmu-move-slow { from { transform: translateX(100%); } to { transform: translateX(-100%); } } @keyframes danmu-move-fast { from { transform: translateX(100%); } to { transform: translateX(-100%); } } </style> </head> <body> <div> <header> <h1>HTML5弹幕效果实现</h1> <p>弹幕（Danmaku）是一种实时评论系统，用户发送的评论以滑动字幕的形式直接显示在视频画面上。本页面展示了如何使用HTML5、CSS3和JavaScript实现高性能的弹幕效果。</p> </header> <div> <div> <div> <h2>弹幕效果演示区</h2> <p>在此区域中，用户发送的弹幕将从右向左滚动显示。弹幕支持自定义颜色、速度和位置。</p> </div> <div id="danmuContainer"></div> </div> <div> <h2>弹幕控制面板</h2> <div> <label for="danmuText">弹幕内容</label> <input type="text" id="danmuText" placeholder="输入要发送的弹幕内容..." value="HTML5弹幕效果真棒！"> </div> <div> <label for="colorPicker">弹幕颜色</label> <select id="colorPicker"> <option value="#ffffff">白色</option> <option value="#ff0000" selected>红色</option> <option value="#00ff00">绿色</option> <option value="#0000ff">蓝色</option> <option value="#ffff00">黄色</option> <option value="#ff00ff">粉色</option> <option value="#00ffff">青色</option> </select> </div> <div> <label for="speedControl">弹幕速度</label> <select id="speedControl"> <option value="slow">慢速</option> <option value="normal" selected>正常</option> <option value="fast">快速</option> </select> </div> <button id="sendDanmu">发送弹幕</button> <button id="autoSend" style="background:linear-gradient(90deg, #e52e71, #ff8a00); margin-top:15px;">自动发送演示</button> </div> </div> <div> <div> <h3>弹幕历史记录</h3> <button id="clearHistory" style="width:auto; padding:8px 15px; background:rgba(255,0,0,0.3);">清除记录</button> </div> <div id="historyList"></div> </div> <div> <div> <h3><i>🚀</i> 高性能渲染</h3> <p>使用CSS3动画和硬件加速，确保即使大量弹幕同时显示也能保持流畅运行，不卡顿不掉帧。</p> </div> <div> <h3><i>🎨</i> 自定义样式</h3> <p>支持自定义弹幕颜色、大小、速度和位置，用户可以根据个人喜好调整弹幕显示效果。</p> </div> <div> <h3><i>💾</i> 历史记录</h3> <p>自动保存发送的弹幕记录，方便用户查看和重新发送历史弹幕内容。</p> </div> </div> <div> <h2>实现原理</h2> <div> <div> <h3>HTML结构</h3> <p>创建视频容器和弹幕容器，弹幕容器使用绝对定位覆盖在视频上方。</p> </div> <div> <h3>CSS样式</h3> <p>为弹幕元素设置样式和动画，使用CSS3的@keyframes实现平滑滚动效果。</p> </div> <div> <h3>JavaScript逻辑</h3> <p>动态创建弹幕元素，随机设置垂直位置，应用动画效果，并在动画结束后移除元素。</p> </div> <div> <h3>性能优化</h3> <p>使用transform进行动画，启用GPU加速，限制弹幕数量，回收已完成动画的元素。</p> </div> </div> </div> <footer> <p>© 2023 HTML5弹幕效果实现 | 使用HTML5、CSS3和JavaScript构建</p> </footer> </div> <script> document.addEventListener('DOMContentLoaded', function() { const danmuContainer = document.getElementById('danmuContainer'); const danmuText = document.getElementById('danmuText'); const colorPicker = document.getElementById('colorPicker'); const speedControl = document.getElementById('speedControl'); const sendButton = document.getElementById('sendDanmu'); const autoSendButton = document.getElementById('autoSend'); const historyList = document.getElementById('historyList'); const clearHistoryButton = document.getElementById('clearHistory'); // 弹幕历史数据 let danmuHistory = []; // 发送弹幕函数 function sendDanmu(text, color, speed) { if (!text.trim()) return; // 创建弹幕元素 const danmu = document.createElement('div'); danmu.className = 'danmu'; danmu.textContent = text; danmu.style.color = color; // 随机垂直位置（顶部20px到底部50px之间） const topPos = Math.floor(Math.random() * (danmuContainer.clientHeight - 70)) + 20; danmu.style.top = `${topPos}px`; // 设置动画速度和持续时间 let duration; switch(speed) { case 'slow': duration = 15; danmu.style.animation = 'danmu-move-slow ' + duration + 's linear'; break; case 'fast': duration = 5; danmu.style.animation = 'danmu-move-fast ' + duration + 's linear'; break; default: // normal duration = 10; danmu.style.animation = 'danmu-move ' + duration + 's linear'; } // 添加到容器 danmuContainer.appendChild(danmu); // 动画结束后移除元素 setTimeout(() => { if (danmu.parentNode) { danmu.parentNode.removeChild(danmu); } }, duration * 1000); // 保存到历史 saveToHistory(text, color); } // 保存到历史记录 function saveToHistory(text, color) { // 添加到历史数组 danmuHistory.unshift({text, color, time: new Date()}); // 限制历史记录数量 if (danmuHistory.length > 20) { danmuHistory.pop(); } // 更新历史列表显示 updateHistoryList(); } // 更新历史列表显示 function updateHistoryList() { historyList.innerHTML = ''; danmuHistory.forEach(item => { const historyItem = document.createElement('div'); historyItem.className = 'history-item'; const colorBox = document.createElement('div'); colorBox.className = 'history-color'; colorBox.style.backgroundColor = item.color; const textSpan = document.createElement('span'); textSpan.textContent = item.text; historyItem.appendChild(colorBox); historyItem.appendChild(textSpan); // 点击历史记录项重新发送 historyItem.addEventListener('click', () => { sendDanmu(item.text, item.color, speedControl.value); }); historyList.appendChild(historyItem); }); } // 初始示例弹幕 function initDemoDanmu() { const demoTexts = [ '欢迎体验HTML5弹幕效果！', '支持自定义颜色和速度', '试试发送你自己的弹幕吧', '历史记录功能很实用', 'CSS3动画实现流畅效果', '高性能弹幕渲染', '滚动效果平滑自然', '试试不同的弹幕颜色', '可以调整弹幕速度哦', '感谢您的使用！' ]; const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff']; // 初始发送一些示例弹幕 demoTexts.forEach((text, index) => { setTimeout(() => { sendDanmu(text, colors[index % colors.length], 'normal'); }, index * 1500); }); } // 自动发送演示弹幕 function autoSendDemo() { const texts = [ 'HTML5弹幕效果太棒了！', '这个实现很流畅', '颜色选择很方便', '速度控制很实用', '历史记录功能很好用', '用户体验非常友好', '动画效果非常流畅', '性能优化做得很好', '界面设计很现代化', '支持多种弹幕效果' ]; const colors = ['#ff5555', '#55ff55', '#5555ff', '#ffff55', '#ff55ff', '#55ffff', '#ffaa00']; // 每2秒发送一条弹幕 const interval = setInterval(() => { const randomText = texts[Math.floor(Math.random() * texts.length)]; const randomColor = colors[Math.floor(Math.random() * colors.length)]; const speeds = ['slow', 'normal', 'fast']; const randomSpeed = speeds[Math.floor(Math.random() * speeds.length)]; sendDanmu(randomText, randomColor, randomSpeed); }, 2000); // 10秒后停止 setTimeout(() => { clearInterval(interval); autoSendButton.textContent = '自动发送演示'; autoSendButton.disabled = false; }, 10000); } // 事件监听 sendButton.addEventListener('click', () => { sendDanmu(danmuText.value, colorPicker.value, speedControl.value); danmuText.value = ''; }); danmuText.addEventListener('keypress', (e) => { if (e.key === 'Enter') { sendDanmu(danmuText.value, colorPicker.value, speedControl.value); danmuText.value = ''; } }); autoSendButton.addEventListener('click', () => { autoSendButton.textContent = '发送中...'; autoSendButton.disabled = true; autoSendDemo(); }); clearHistoryButton.addEventListener('click', () => { danmuHistory = []; updateHistoryList(); }); // 初始化 initDemoDanmu(); }); </script> </body> </html>
冀公网安备