123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108 |
- *{margin:0;padding:0;}
- :root {
- --twinkle-duration: 4s;
- }
- .stars-wrapper {
- position: relative;
- pointer-events: none;
- width: 100vw;
- height: 100vh;
- background: -webkit-gradient(linear, left top, left bottom, from(#16161d), color-stop(#1f1f3a), to(#3b2f4a));
- background: linear-gradient(#16161d, #1f1f3a, #3b2f4a);
- overflow: hidden;
- }
- .stars {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- -webkit-animation: twinkle var(--twinkle-duration) ease-in-out infinite;
- animation: twinkle var(--twinkle-duration) ease-in-out infinite;
- }
- .stars:nth-child(2) {
- -webkit-animation-delay: calc(var(--twinkle-duration) * -0.33);
- animation-delay: calc(var(--twinkle-duration) * -0.33);
- }
- .stars:nth-child(3) {
- -webkit-animation-delay: calc(var(--twinkle-duration) * -0.66);
- animation-delay: calc(var(--twinkle-duration) * -0.66);
- }
- @-webkit-keyframes twinkle {
- 25% {
- opacity: 0;
- }
- }
- @keyframes twinkle {
- 25% {
- opacity: 0;
- }
- }
- .star {
- fill: white;
- }
- .star:nth-child(3n) {
- opacity: 0.8;
- }
- .star:nth-child(7n) {
- opacity: 0.6;
- }
- .star:nth-child(13n) {
- opacity: 0.4;
- }
- .star:nth-child(19n) {
- opacity: 0.2;
- }
- .comet {
- -webkit-transform-origin: center center;
- transform-origin: center center;
- -webkit-animation: comet 10s linear infinite;
- animation: comet 10s linear infinite;
- }
- @-webkit-keyframes comet {
- 0%,
- 40% {
- -webkit-transform: translateX(0);
- transform: translateX(0);
- opacity: 0;
- }
- 50% {
- opacity: 1;
- }
- 60%,
- 100% {
- -webkit-transform: translateX(-100vmax);
- transform: translateX(-100vmax);
- opacity: 0;
- }
- }
- @keyframes comet {
- 0%,
- 40% {
- -webkit-transform: translateX(0);
- transform: translateX(0);
- opacity: 0;
- }
- 50% {
- opacity: 1;
- }
- 60%,
- 100% {
- -webkit-transform: translateX(-100vmax);
- transform: translateX(-100vmax);
- opacity: 0;
- }
- }
- .comet-b {
- -webkit-animation-delay: -3.3s;
- animation-delay: -3.3s;
- }
- .comet-c {
- -webkit-animation-delay: -5s;
- animation-delay: -5s;
- }
|