User:Yb30
<style>body {
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%); height: 100vh; overflow: hidden; display: flex; font-family: 'Anton', sans-serif; justify-content: center; align-items: center;
}
$shooting-time: 3000ms;
.night {
position: relative; width: 100%; height: 100%; transform: rotateZ(45deg); // animation: sky 200000ms linear infinite;
}
.shooting_star {
position: absolute;
left: 50%;
top: 50%;
// width: 100px;
height: 2px;
background: linear-gradient(-45deg, rgba(95, 145, 255, 1), rgba(0, 0, 255, 0));
border-radius: 999px;
filter: drop-shadow(0 0 6px rgba(105, 155, 255, 1));
animation:
tail$ (Error compiling LaTeX. Unknown error_msg)shooting-time ease-in-out infinite,
shooting $shooting-time ease-in-out infinite;
&::before {
content: '';
position: absolute;
top: calc(50% - 1px);
right: 0;
// width: 30px;
height: 2px;
background: linear-gradient(-45deg, rgba(0, 0, 255, 0), rgba(95, 145, 255, 1), rgba(0, 0, 255, 0));
transform: translateX(50%) rotateZ(45deg);
border-radius: 100%;
animation: shining$ (Error compiling LaTeX. Unknown error_msg)shooting-time ease-in-out infinite;
}
&::after { // CodePen Error // @extend .shooting_star::before; content: ; position: absolute; top: calc(50% - 1px); right: 0; // width: 30px; height: 2px; background: linear-gradient(-45deg, rgba(0, 0, 255, 0), rgba(95, 145, 255, 1), rgba(0, 0, 255, 0)); transform: translateX(50%) rotateZ(45deg); border-radius: 100%; animation: shining $shooting-time ease-in-out infinite; transform: translateX(50%) rotateZ(-45deg); } @for$ (Error compiling LaTeX. Unknown error_msg)i from 1 through 20 { &:nth-child(#{$i}) {$ (Error compiling LaTeX. Unknown error_msg)delay: random(9999) + 0ms; top: calc(50% - #{random(400) - 200px}); left: calc(50% - #{random(300) + 0px}); animation-delay: $delay; // opacity: random(50) / 100 + 0.5; &::before, &::after { animation-delay:$ (Error compiling LaTeX. Unknown error_msg)delay; } } }
}
@keyframes tail {
0% { width: 0; } 30% { width: 100px; } 100% { width: 0; }
}
@keyframes shining {
0% { width: 0; } 50% { width: 30px; } 100% { width: 0; }
}
@keyframes shooting {
0% { transform: translateX(0); } 100% { transform: translateX(300px); }
}
@keyframes sky {
0% { transform: rotate(45deg); } 100% { transform: rotate(45 + 360deg); }
}
</style>