119 lines
2.4 KiB
CSS
119 lines
2.4 KiB
CSS
.space-background {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 123vh;
|
|
background: radial-gradient(ellipse at center, #0a001f 0%, #000000 80%);
|
|
overflow: hidden;
|
|
z-index: -1;
|
|
}
|
|
|
|
/* Étoiles */
|
|
.star {
|
|
position: absolute;
|
|
width: 2px;
|
|
height: 2px;
|
|
background: white;
|
|
border-radius: 50%;
|
|
opacity: 0.8;
|
|
animation: twinkle 3s infinite ease-in-out alternate;
|
|
filter: drop-shadow(0 0 2px white);
|
|
}
|
|
|
|
.planet {
|
|
position: absolute;
|
|
bottom: 0%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 120vw;
|
|
height: 23vw;
|
|
max-height: 400px;
|
|
background: #0D0D0D;
|
|
border-radius: 60% 60% 0 0 / 100% 100% 0 0;
|
|
z-index: 1;
|
|
|
|
/* Halo extérieur et intérieur */
|
|
box-shadow:
|
|
0 -20px 60px 10px rgba(255, 255, 255, 0.35),
|
|
inset 0 20px 60px 10px rgba(255, 255, 255, 0.25);
|
|
}
|
|
|
|
/* Ligne lumineuse nette et fine en arc */
|
|
.planet::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: -3px; /* colle bien au bord */
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 100%;
|
|
height: 100%;
|
|
border-top: 2.5px solid white; /* ligne légèrement plus épaisse */
|
|
border-radius: 60% 60% 0 0 / 100% 100% 0 0;
|
|
mask-image: linear-gradient(to right, transparent 0%, white 40%, white 60%, transparent 100%);
|
|
pointer-events: none;
|
|
z-index: 2;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@keyframes twinkle {
|
|
0% { opacity: 0.3; transform: scale(0.8); }
|
|
100% { opacity: 1; transform: scale(1.2); }
|
|
}
|
|
|
|
/* Nébuleuses */
|
|
.nebula {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(80px);
|
|
opacity: 0.5;
|
|
mix-blend-mode: screen;
|
|
animation: nebulaMove 15s ease-in-out infinite alternate;
|
|
}
|
|
|
|
.nebula1 {
|
|
width: 400px;
|
|
height: 400px;
|
|
background: radial-gradient(circle, #9b59b6 0%, transparent 70%);
|
|
top: 10%;
|
|
left: 15%;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.nebula2 {
|
|
width: 600px;
|
|
height: 600px;
|
|
background: radial-gradient(circle, #8e44ad 0%, transparent 70%);
|
|
top: 50%;
|
|
left: 65%;
|
|
animation-delay: 5s;
|
|
}
|
|
|
|
.nebula3 {
|
|
width: 350px;
|
|
height: 350px;
|
|
background: radial-gradient(circle, #663399 0%, transparent 70%);
|
|
top: 75%;
|
|
left: 35%;
|
|
animation-delay: 10s;
|
|
}
|
|
|
|
@keyframes nebulaMove {
|
|
0% {
|
|
transform: translate(0, 0) scale(1);
|
|
opacity: 0.5;
|
|
}
|
|
100% {
|
|
transform: translate(20px, -20px) scale(1.05);
|
|
opacity: 0.6;
|
|
}
|
|
}
|