首页html流星雨代码加名字

html流星雨代码加名字

时间: 2023-10-31 13:05:31 浏览: 198

流星雨代码.html

5星 · 资源好评率100%

流星雨代码.html

以下是一个带有名字的HTML流星雨代码： ```html <!DOCTYPE html> <html> <head> <title>流星雨 by YourName</title> <style> body { background-color: black; } .stars { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url("https://i.imgur.com/9RGHmJr.png"); z-index: -1; } .meteor { position: absolute; top: -100px; left: 50%; width: 20px; height: 20px; background-image: url("https://i.imgur.com/6YqJb8x.png"); background-size: cover; animation: meteor-fall 2.5s linear infinite; } @keyframes meteor-fall { 0% { transform: translate(-50%, -100px); } 100% { transform: translate(-50%, 110%); } } .name { position: fixed; bottom: 10px; right: 10px; color: white; font-size: 20px; font-family: Arial, sans-serif; } </style> </head> <body> <div class="stars"></div> <div class="meteor"></div> <div class="meteor"></div> <div class="meteor"></div> <div class="meteor"></div> <div class="meteor"></div> <div class="meteor"></div> <div class="meteor"></div> <div class="meteor"></div> <div class="meteor"></div> <div class="name">流星雨 by YourName</div> </body> </html> ``` 这个代码使用了CSS动画来实现流星的落下效果，并使用了一个星空背景图来增加视觉效果。同时，我们在页面底部添加了作者名字的信息。你可以在浏览器中打开这个代码，看看效果是怎样的。

阅读全文