weps25's picture
rends le plus jolie et immersif , donc pas du blanc en fond
17be401 verified
Raw
History Blame Contribute Delete
1.89 kB
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
@keyframes pulse {
0%, 100% {
opacity: 0.5;
}
50% {
opacity: 1;
}
}
.stars, .stars2, .stars3 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.stars {
background-image:
radial-gradient(1px 1px at 20px 30px, white, rgba(0,0,0,0)),
radial-gradient(1px 1px at 40px 70px, white, rgba(0,0,0,0)),
radial-gradient(1px 1px at 90px 40px, white, rgba(0,0,0,0)),
radial-gradient(1px 1px at 130px 80px, white, rgba(0,0,0,0)),
radial-gradient(1px 1px at 160px 120px, white, rgba(0,0,0,0));
background-repeat: repeat;
animation: float 100s linear infinite;
}
.stars2 {
background-image:
radial-gradient(1px 1px at 50px 160px, white, rgba(0,0,0,0)),
radial-gradient(1px 1px at 90px 90px, white, rgba(0,0,0,0)),
radial-gradient(1px 1px at 220px 60px, white, rgba(0,0,0,0)),
radial-gradient(1px 1px at 280px 150px, white, rgba(0,0,0,0));
background-repeat: repeat;
animation: float 150s linear infinite;
}
.stars3 {
background-image:
radial-gradient(1px 1px at 180px 200px, white, rgba(0,0,0,0)),
radial-gradient(1px 1px at 250px 40px, white, rgba(0,0,0,0)),
radial-gradient(1px 1px at 320px 180px, white, rgba(0,0,0,0));
background-repeat: repeat;
animation: float 200s linear infinite;
}
body {
overflow-x: hidden;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #1e1e1e;
}
::-webkit-scrollbar-thumb {
background: #8b5cf6;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #7c3aed;
}
/* Text selection */
::selection {
background: #8b5cf6;
color: white;
}