3秒后逐字高亮！HTML+CSS+JS实现网页文案逐字阅读特效

要实现这个功能，我们需要使用HTML来定义网页结构，CSS来设置样式，并利用JavaScript来控制文字的高亮显示。下面是一个简单的示例代码： 1. HTML：定义文本内容。 2. CSS：设置基本样式和动画效果。 3. JavaScript：控制文字逐字高亮。 HTML 文件 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>逐字高亮</title> <style> body, html { margin: 0; padding: 0; font-family: 'Arial', sans-serif; background-color: #f5f5f5; } .content { width: 80%; max-width: 600px; margin: 50px auto; padding: 20px; border: 1px solid #ccc; background-color: white; text-align: justify; } .highlighted { background-color: yellow; animation: highlight 0.5s linear; } @keyframes highlight { 0% { background-color: yellow; } 100% { background-color: transparent; } } </style> </head> <body> <div class="content" id="text-content"> 这是一段示例文本，用于演示如何在网页上逐字高亮显示文字。这段文字将在三秒钟后开始被高亮显示。 </div> <script> const contentElement = document.getElementById('text-content'); const words = contentElement.textContent.split(''); let index = 0; // 清空原始文本并替换为单个字符的span元素 contentElement.innerHTML = ''; words.forEach(word => { const span = document.createElement('span'); span.textContent = word; span.style.display = 'inline'; contentElement.appendChild(span); }); setTimeout(function() { const spans = document.querySelectorAll('#text-content span'); const intervalId = setInterval(function() { if (index < spans.length) { spans[index].classList.add('highlighted'); index++; } else { clearInterval(intervalId); } }, 100); // 每100毫秒高亮一个字 }, 3000); // 3秒后开始高亮 </script> </body> </html> ``` 解释： 1. HTML: - `<div class="content">` 包含了需要高亮显示的文本。 2. CSS: - `.highlighted` 类添加了颜色，并通过CSS动画使颜色变化。 3. JavaScript: - 使用 `setTimeout` 在3秒后开始执行高亮逻辑。 - 文本被拆分成单个字符，并用 `<span>` 元素包裹。 - 每隔100毫秒（可以根据需要调整）将下一个字符添加到 `.highlighted` 类中。这样就可以实现你的需求。你可以根据实际情况调整时间间隔、动画效果等。 ######[AI写代码神器 | 676点数解答 | 2024-08-04 20:07:01]

服务商

更多选项

快捷项

自定义