Mix Youtube videos like a true DJ! https://dj.tflcl.xyz
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

161 lines
3.7 KiB

:root {
--shooting-star-duration: 3000ms;
--shooting-star-angle: 10deg;
--shooting-star-translate: 300px;
--shooting-star-direction: 1; /* 1 or -1 */
}
/* From https://www.geeksforgeeks.org/how-to-create-shooting-star-animation-effect-using-css/ */
.shooting-stars-wrapper {
position: fixed;
width: 100%;
height: 100%;
-webkit-transform: scaleX(var(--shooting-star-direction)) rotateZ(var(--shooting-star-angle));
transform: scaleX(var(--shooting-star-direction)) rotateZ(var(--shooting-star-angle));
}
.shooting-star {
position: absolute;
/* left: 50%; */
top: 50%;
height: 2px;
border-radius: 885px;
background: linear-gradient(-45deg, #eef0f5, rgba(0, 0, 255, 0));
-webkit-filter: drop-shadow(0 0 6px #eef1f8);
filter: drop-shadow(0 0 6px #d7dff0);
-webkit-animation: tail var(--shooting-star-duration) ease-in-out 1,
shooting var(--shooting-star-duration) ease-in-out 1;
animation: tail var(--shooting-star-duration) ease-in-out 1,
shooting var(--shooting-star-duration) ease-in-out 1;
}
/* .shooting-star.is-shooting {
-webkit-animation: tail var(--shooting-star-duration) ease-in-out 1,
shooting var(--shooting-star-duration) ease-in-out 1;
animation: tail var(--shooting-star-duration) ease-in-out 1,
shooting var(--shooting-star-duration) ease-in-out 1;
} */
/* Here we add before and after effect to star */
.shooting-star::before,
.shooting-star::after {
content: "";
position: absolute;
top: calc(50% - 1px);
right: 0;
height: 2px;
background: linear-gradient(
-45deg,
rgba(0, 0, 255, 0),
#eaeef8,
rgba(0, 0, 255, 0)
);
-webkit-transform: translateX(50%) rotateZ(45deg);
transform: translateX(50%) rotateZ(45deg);
border-radius: 100%;
-webkit-animation: shining var(--shooting-star-duration) ease-in-out 1;
animation: shining var(--shooting-star-duration) ease-in-out 1;
}
/* .shooting-star.is-shooting::before,
.shooting-star.is-shooting::after {
-webkit-animation: shining var(--shooting-star-duration) ease-in-out 1;
animation: shining var(--shooting-star-duration) ease-in-out 1;
} */
.shooting-star::after {
-webkit-transform: translateX(50%) rotateZ(-45deg);
transform: translateX(50%) rotateZ(-45deg);
}
/* Here we are adding location of each
nth-child, animations, delays, and
before and after effects to each
and every balls(stars) */
/* .shooting-star:nth-child(1) {
top: calc(50% - -119px);
left: calc(50% - 43px);
-webkit-animation-delay: 4000ms;
animation-delay: 4000ms;
}
.shooting-star:nth-child(1)::before,
.shooting-star:nth-child(1)::after {
-webkit-animation-delay: 4000ms;
animation-delay: 4000ms;
} */
/* This code will help to generate
effect in tail of star */
@keyframes tail {
0% {
width: 0;
}
30% {
width: 100px;
}
100% {
width: 0;
}
}
@-webkit-keyframes tail {
0% {
width: 0;
}
30% {
width: 100px;
}
100% {
width: 0;
}
}
/* This code will generate shining
effect in head of star */
@keyframes shining {
0% {
width: 0;
}
50% {
width: 30px;
}
100% {
width: 0;
}
}
@-webkit-keyframes shining {
0% {
width: 0;
}
50% {
width: 30px;
}
100% {
width: 0;
}
}
/* Here we make shooting effect */
@keyframes shooting {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(var(--shooting-star-translate));
transform: translateX(var(--shooting-star-translate));
}
}
@-webkit-keyframes shooting {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(var(--shooting-star-translate));
transform: translateX(var(--shooting-star-translate));
}
}