首页使用html实现动态粒子

使用html实现动态粒子

时间: 2024-04-13 13:26:03 浏览: 65

以下是一个使用 HTML 和 CSS 实现动态粒子效果的代码示例： ```html <!DOCTYPE html> <html> <head> <title>动态粒子效果</title> <style> body { background-color: #000; overflow: hidden; } .particles { position: absolute; width: 100%; height: 100%; } .particle { position: absolute; border-radius: 50%; background-color: #fff; animation: particleAnimation 3s infinite; } @keyframes particleAnimation { 0% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(200px, 200px); opacity: 0; } } </style> </head> <body> <div class="particles"> <div class="particle" style="top: 50px; left: 50px;"></div> <div class="particle" style="top: 100px; left: 100px;"></div> <div class="particle" style="top: 150px; left: 150px;"></div>  </div> </body> </html> ``` 这段代码创建了一个黑色背景的页面，粒子效果通过使用 CSS 的动画实现。每个粒子都是一个带有圆形边框和白色背景的 `div` 元素。通过调整 `top` 和 `left` 属性可以控制粒子的位置。你可以添加更多的粒子来增加效果。复制代码到一个 HTML 文件中，然后在浏览器中打开文件以查看动态粒子效果。

阅读全文