使用HTMLCSS和JAVASCRIPT的黑洞动画
- 其他
- 2025-09-06 16:51:01
使用 HTML CSS 和 JAVASCRIPT 的黑洞动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Black Hole Animation</title> <style> body { margin: 0; overflow: hidden; background: radial-gradient(ellipse at center, black, #1a1a1a); height: 100vh; display: flex; justify-content: center; align-items: center; } .black-hole-container { position: relative; width: 300px; height: 300px; } .black-hole { position: absolute; bottom: 20px; left: 50%; width: 200px; height: 200px; background: black; border-radius: 50%; border: 10px solid transparent; /* background-image: conic-gradient(pink 0% 33%, purple 33% 66%, blue 66% 100%); */ box-shadow: 0 0 20px 5px pink, 0 0 40px 10px purple, 0 0 60px 15px blue; animation: neon-glow 3s infinite ease-in-out; transform: translateX(-50%); } .purple-shadow { position: absolute; top: 30px; left: 50%; width: 450px; height: 450px; background: radial-gradient(circle, rgba(128, 0, 128, 0.2), transparent 70%); border-radius: 50%; transform: translate(-50%); animation: wave-color-motion 5s infinite ease-in-out; } .stars { position: absolute; width: 100%; height: 100%; z-index: -1; } .star { position: absolute; width: 4px; height: 4px; background: purple; border-radius: 50%; animation: twinkle 3s infinite ease-in-out; } /* Animations */ @keyframes neon-glow { 0%, 100% { box-shadow: 0 0 20px 5px pink, 0 0 40px 10px purple, 0 0 60px 15px blue; } 50% { box-shadow: 0 0 30px 10px pink, 0 0 50px 15px purple, 0 0 70px 20px blue; } } @keyframes wave-color-motion { 0% { transform: translate(-50%) scale(1); background: radial-gradient(circle, rgba(59, 3, 59, 0.2), transparent 70%); } 25% { transform: translate(-50%) scale(1.1); background: radial-gradient(circle, rgba(170, 0, 170, 0.4), transparent 70%); } 50% { transform: translate(-50%) scale(1.2); background: radial-gradient(circle, rgba(200, 0, 200, 0.6), transparent 70%); } 75% { transform: translate(-50%) scale(1.1); background: radial-gradient(circle, rgba(170, 0, 170, 0.4), transparent 70%); } 100% { transform: translate(-50%) scale(1); background: radial-gradient(circle, rgba(128, 0, 128, 0.2), transparent 70%); } } @keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } } </style> </head> <body> <div class="black-hole-container"> <div class="purple-shadow"></div> <div class="black-hole"></div> </div> <div class="stars"></div> <script> const starsContainer = document.querySelector('.stars'); // Generate random stars for (let i = 0; i < 200; i++) { const star = document.createElement('div'); star.classList.add('star'); star.style.left = `${Math.random() * 100}vw`; star.style.top = `${Math.random() * 100}vh`; star.style.animationDelay = `${Math.random() * 5}s`; starsContainer.appendChild(star); } </script> </body> </html>
使用HTMLCSS和JAVASCRIPT的黑洞动画由讯客互联其他栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“使用HTMLCSS和JAVASCRIPT的黑洞动画”
下一篇
java基础——IO流
