首页写一个html流星雨特效

写一个html流星雨特效

时间: 2023-07-25 22:45:22 浏览: 102

好的，下面为您呈现一个简单的HTML流星雨特效： ```html <!DOCTYPE html> <html> <head> <title>HTML流星雨特效</title> <style type="text/css"> body { background-color: black; overflow: hidden; } #meteor { position: absolute; top: -50px; left: 50%; transform: translateX(-50%); width: 2px; height: 50px; background-color: white; box-shadow: 0 0 10px 5px white; animation-name: meteorFall; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: 0s; } @keyframes meteorFall { from { transform: translateX(-50%) translateY(-50px) rotateZ(45deg); opacity: 1; } to { transform: translateX(-50%) translateY(100%) rotateZ(-45deg); opacity: 0; } } </style> </head> <body> <div id="meteor"></div> </body> </html> ``` 这个特效会在页面中央显示一个白色短线段，模拟流星从天空中落下的效果。您可以将上述代码复制到一个HTML文件中，然后在浏览器中打开该文件，即可看到效果。如果您想要增加流星的数量，可以复制`<div id="meteor"></div>`这行代码，粘贴到`<body></body>`标签中，以增加流星的数量。

阅读全文