首页如何用流星雨代码写父亲节祝福

如何用流星雨代码写父亲节祝福

时间: 2023-12-31 12:05:53 浏览: 97

以下是一个简单的示例代码，可以用流星雨效果展示父亲节祝福： ```html <!DOCTYPE html> <html> <head> <title>父亲节祝福</title> <style> body { background-color: #000; color: #fff; font-size: 36px; text-align: center; margin-top: 100px; } #meteorShower { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; } .meteor { position: absolute; width: 2px; height: 30px; background-color: #fff; border-radius: 50%; animation: meteorFall 1s linear infinite; } @keyframes meteorFall { from { transform: translate(0, -100%); } to { transform: translate(100%, 100%); } } </style> </head> <body> <h1>Happy Father's Day!</h1> <p>愿您的父亲节充满温馨和快乐！</p> <div id="meteorShower"> <script> // 生成流星 for (var i = 0; i < 20; i++) { var meteor = document.createElement("div"); meteor.className = "meteor"; meteor.style.left = Math.random() * 100 + "%"; meteor.style.animationDelay = Math.random() * 5 + "s"; document.getElementById("meteorShower").appendChild(meteor); } </script> </div> </body> </html> ``` 在这个示例中，我们使用了一个包含了流星雨效果的 DIV 元素，并在其中动态生成了一些流星元素。同时，我们在页面中添加了一个简单的祝福语句，来向父亲表达祝福。

阅读全文