代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>css3动画</title> <style> * { margin: 0; padding: 0; } .container { width: 100vw; height: 100vh; background-color: #000; } .moon { width: 100px; height: 100px; border-radius: 50%; background-color: #F5FFFA; box-shadow: 0 0 60px #F5FFFA; position: absolute; left: 80%; top: 150px; animation: myMoon 20s linear; } @keyframes myMoon { 0% { left: 60%; top: 350px; opacity: 0; } 100% { left: 80%; top: 150px; opacity: 1; } } img { width: 8px; height: 8px; opacity: 0; position: absolute; left: 0px; top: 0px; animation: myStar 2s ease-in-out infinite; } @keyframes myStar { 0% { opacity: 0; } 50% { opacity: 0.4; } 100% { opacity: 0; } } .star { width: 1px; display: block; position: absolute; background-color: transparent transparent transparent rgba(255, 255, 255, .5); opacity: 0; animation: star 4s linear infinite; } .star::after { content: ''; display: block; border: 1px solid #fff; border-width: 0px 90px 2px 90px; border-color: transparent transparent transparent rgba(255, 255, 255, .5); transform: rotate(-45deg); } @keyframes star { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-500px, 300px); } } </style> </head> <body> <div class="container"> <div class="moon"></div> </div> <script> var width = document.body.clientWidth - 20 var height = document.body.clientHeight - 20 //随机生成星星 for (var i = 0; i < 70; i++) { var img = document.createElement('img') document.body.appendChild(img) img.src = './imgs/star.png' img.style.left = Math.random() * width + 'px' img.style.top = Math.random() * height + 'px' img.style.animationDelay = Math.random() * 3 + 's' //添加动画延迟时间 } //随机生成流星 for (var i = 0; i < 10; i++) { var lx = document.createElement('div') lx.className = 'star' lx.style.right = (Math.random() * 400 + 150) + 'px' lx.style.top = (Math.random() * 200 + 100) + 'px' lx.style.animationDelay = Math.random() * 3 * i + 's' //添加动画延迟时间 document.body.appendChild(lx) } </script> </body> </html>QQ群：327814892 新建的一个QQ群，希望志同道合的朋友在一起交流讨论。
