首页帮我写一段有趣的前端页面代码

帮我写一段有趣的前端页面代码

时间: 2023-08-06 19:26:30 浏览: 97

好的，让我为您写一段有趣的前端页面代码，这是一个简单的动画效果，用 HTML、CSS 和 JavaScript 实现。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>有趣的动画效果</title> <style> body { background-color: #3C3C3C; overflow: hidden; } .circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; border-radius: 50%; background-color: #FF4136; animation: pulse 2s linear infinite; animation-delay: calc(0.1s * var(--n)); } @keyframes pulse { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2); opacity: 0; } } </style> </head> <body> <script> for (let i = 0; i < 50; i++) { let circle = document.createElement("div"); circle.classList.add("circle"); circle.style.setProperty("--n", i); document.body.appendChild(circle); } </script> </body> </html> ``` 这段代码实现了一个动态的圆形动画效果，页面加载后会生成 50 个圆形元素，它们在不停地放大缩小和消失出现，营造出一种非常有趣的视觉效果。您可以将这段代码保存为 HTML 文件并在浏览器中打开，感受一下这个有趣的动画效果！

阅读全文