首页html设置诗句一句一句浮现像念诗句一样

html设置诗句一句一句浮现像念诗句一样

时间: 2024-09-17 17:10:02 浏览: 58

在HTML中，要实现诗句逐句浮现的效果，通常结合CSS动画和JavaScript来完成。你可以使用`<p>`元素来包含每一行诗句，并通过JavaScript控制其显示隐藏。下面是一个简单的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .poem-line { display: none; animation: fadeIn 5s infinite; /* 设置动画效果，比如淡入，持续时间为5秒，无限循环 */ } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } </style> </head> <body> <div id="poem-container"> <p class="poem-line">第一句诗</p> <p class="poem-line">第二句诗</p>  </div> <script> function revealVerse(n) { var lines = document.querySelectorAll('.poem-line'); for (var i = 0; i < n; i++) { lines[i].style.display = 'block'; } } // 开始时显示第一句 revealVerse(1); // 或者添加按钮点击事件来触发诗句显示 // 比如： // <button onclick="revealVerse(2)">下一诗句</button> </script> </body> </html> ``` 在这个例子中，每行诗句开始时会被隐藏（`display: none;`），然后使用JavaScript函数`revealVerse`逐次改变它们的`display`样式为`block`，实现诗句逐行显现。

阅读全文