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.
160 lines
3.7 KiB
160 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)); |
|
} |
|
}
|
|
|