HTML彈幕效果實(shí)現(xiàn)

發(fā)布時間：2025-08-01 熱度：
設(shè)計思路：

創(chuàng)建中央視頻播放器區(qū)域作為彈幕背景
實(shí)現(xiàn)彈幕發(fā)送面板（文本輸入、顏色選擇、速度控制）
提供多種彈幕效果展示（普通彈幕、高級彈幕、彩色彈幕等）
添加彈幕歷史記錄功能
使用現(xiàn)代化UI設(shè)計（深色主題+霓虹效果）
下面是完整實(shí)現(xiàn)代碼：
<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>HTML5彈幕效果實(shí)現(xiàn)</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彈幕效果實(shí)現(xiàn)</h1>             <p>彈幕（Danmaku）是一種實(shí)時評論系統(tǒng)，用戶發(fā)送的評論以滑動字幕的形式直接顯示在視頻畫面上。本頁面展示了如何使用HTML5、CSS3和JavaScript實(shí)現(xiàn)高性能的彈幕效果。</p>         </header>                  <div>             <div>                 <div>                     <h2>彈幕效果演示區(qū)</h2>                     <p>在此區(qū)域中，用戶發(fā)送的彈幕將從右向左滾動顯示。彈幕支持自定義顏色、速度和位置。</p>                 </div>                 <div id="danmuContainer"></div>             </div>                          <div>                 <h2>彈幕控制面板</h2>                                  <div>                     <label for="danmuText">彈幕內(nèi)容</label>                     <input type="text" id="danmuText" placeholder="輸入要發(fā)送的彈幕內(nèi)容..." 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">藍(lán)色</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">發(fā)送彈幕</button>                 <button id="autoSend" style="background:linear-gradient(90deg, #e52e71, #ff8a00); margin-top:15px;">自動發(fā)送演示</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動畫和硬件加速，確保即使大量彈幕同時顯示也能保持流暢運(yùn)行，不卡頓不掉幀。</p>             </div>             <div>                 <h3><i>??</i> 自定義樣式</h3>                 <p>支持自定義彈幕顏色、大小、速度和位置，用戶可以根據(jù)個人喜好調(diào)整彈幕顯示效果。</p>             </div>             <div>                 <h3><i>??</i> 歷史記錄</h3>                 <p>自動保存發(fā)送的彈幕記錄，方便用戶查看和重新發(fā)送歷史彈幕內(nèi)容。</p>             </div>         </div>                  <div>             <h2>實(shí)現(xiàn)原理</h2>             <div>                 <div>                     <h3>HTML結(jié)構(gòu)</h3>                     <p>創(chuàng)建視頻容器和彈幕容器，彈幕容器使用絕對定位覆蓋在視頻上方。</p>                 </div>                 <div>                     <h3>CSS樣式</h3>                     <p>為彈幕元素設(shè)置樣式和動畫，使用CSS3的@keyframes實(shí)現(xiàn)平滑滾動效果。</p>                 </div>                 <div>                     <h3>JavaScript邏輯</h3>                     <p>動態(tài)創(chuàng)建彈幕元素，隨機(jī)設(shè)置垂直位置，應(yīng)用動畫效果，并在動畫結(jié)束后移除元素。</p>                 </div>                 <div>                     <h3>性能優(yōu)化</h3>                     <p>使用transform進(jìn)行動畫，啟用GPU加速，限制彈幕數(shù)量，回收已完成動畫的元素。</p>                 </div>             </div>         </div>                  <footer>             <p>? 2023 HTML5彈幕效果實(shí)現(xiàn) | 使用HTML5、CSS3和JavaScript構(gòu)建</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');                          // 彈幕歷史數(shù)據(jù)             let danmuHistory = [];                          // 發(fā)送彈幕函數(shù)             function sendDanmu(text, color, speed) {                 if (!text.trim()) return;                                  // 創(chuàng)建彈幕元素                 const danmu = document.createElement('div');                 danmu.className = 'danmu';                 danmu.textContent = text;                 danmu.style.color = color;                                  // 隨機(jī)垂直位置（頂部20px到底部50px之間）                 const topPos = Math.floor(Math.random() * (danmuContainer.clientHeight - 70)) + 20;                 danmu.style.top = `${topPos}px`;                                  // 設(shè)置動畫速度和持續(xù)時間                 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);                                  // 動畫結(jié)束后移除元素                 setTimeout(() => {                     if (danmu.parentNode) {                         danmu.parentNode.removeChild(danmu);                     }                 }, duration * 1000);                                  // 保存到歷史                 saveToHistory(text, color);             }                          // 保存到歷史記錄             function saveToHistory(text, color) {                 // 添加到歷史數(shù)組                 danmuHistory.unshift({text, color, time: new Date()});                                  // 限制歷史記錄數(shù)量                 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);                                          // 點(diǎn)擊歷史記錄項重新發(fā)送                     historyItem.addEventListener('click', () => {                         sendDanmu(item.text, item.color, speedControl.value);                     });                                          historyList.appendChild(historyItem);                 });             }                          // 初始示例彈幕             function initDemoDanmu() {                 const demoTexts = [                     '歡迎體驗(yàn)HTML5彈幕效果！',                     '支持自定義顏色和速度',                     '試試發(fā)送你自己的彈幕吧',                     '歷史記錄功能很實(shí)用',                     'CSS3動畫實(shí)現(xiàn)流暢效果',                     '高性能彈幕渲染',                     '滾動效果平滑自然',                     '試試不同的彈幕顏色',                     '可以調(diào)整彈幕速度哦',                     '感謝您的使用！'                 ];                                  const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];                                  // 初始發(fā)送一些示例彈幕                 demoTexts.forEach((text, index) => {                     setTimeout(() => {                         sendDanmu(text, colors[index % colors.length], 'normal');                     }, index * 1500);                 });             }                          // 自動發(fā)送演示彈幕             function autoSendDemo() {                 const texts = [                     'HTML5彈幕效果太棒了！',                     '這個實(shí)現(xiàn)很流暢',                     '顏色選擇很方便',                     '速度控制很實(shí)用',                     '歷史記錄功能很好用',                     '用戶體驗(yàn)非常友好',                     '動畫效果非常流暢',                     '性能優(yōu)化做得很好',                     '界面設(shè)計很現(xiàn)代化',                     '支持多種彈幕效果'                 ];                                  const colors = ['#ff5555', '#55ff55', '#5555ff', '#ffff55', '#ff55ff', '#55ffff', '#ffaa00'];                                  // 每2秒發(fā)送一條彈幕                 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 = '自動發(fā)送演示';                     autoSendButton.disabled = false;                 }, 10000);             }                          // 事件監(jiān)聽             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 = '發(fā)送中...';                 autoSendButton.disabled = true;                 autoSendDemo();             });                          clearHistoryButton.addEventListener('click', () => {                 danmuHistory = [];                 updateHistoryList();             });                          // 初始化             initDemoDanmu();         });     </script> </body> </html>