使用 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 starsfor (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>
