<!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>
0 seconds of 0 secondsVolume 90%
Press shift question mark to access a list of keyboard shortcuts
Keyboard Shortcuts
Shortcuts Open/Close/ or ?
Play/PauseSPACE
Increase Volume↑
Decrease Volume↓
Seek Forward→
Seek Backward←
Captions On/Offc
Fullscreen/Exit Fullscreenf
Mute/Unmutem
Decrease Caption Size-
Increase Caption Size+ or =
Seek %0-9
How I fixed 20 seconds of lag for every user in just 20 minutes.
Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (1)
Result
A central black hole with a glowing aura and a starry background, where the stars twinkle randomly, creating a cosmic and dynamic visual Future of 5G technology . The aura around the black hole changes over time, giving it a lively and mystical appearance.