luxing.css 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. *{margin:0;padding:0;}
  2. :root {
  3. --twinkle-duration: 4s;
  4. }
  5. .stars-wrapper {
  6. position: relative;
  7. pointer-events: none;
  8. width: 100vw;
  9. height: 100vh;
  10. background: -webkit-gradient(linear, left top, left bottom, from(#16161d), color-stop(#1f1f3a), to(#3b2f4a));
  11. background: linear-gradient(#16161d, #1f1f3a, #3b2f4a);
  12. overflow: hidden;
  13. }
  14. .stars {
  15. position: absolute;
  16. top: 0;
  17. left: 0;
  18. right: 0;
  19. bottom: 0;
  20. -webkit-animation: twinkle var(--twinkle-duration) ease-in-out infinite;
  21. animation: twinkle var(--twinkle-duration) ease-in-out infinite;
  22. }
  23. .stars:nth-child(2) {
  24. -webkit-animation-delay: calc(var(--twinkle-duration) * -0.33);
  25. animation-delay: calc(var(--twinkle-duration) * -0.33);
  26. }
  27. .stars:nth-child(3) {
  28. -webkit-animation-delay: calc(var(--twinkle-duration) * -0.66);
  29. animation-delay: calc(var(--twinkle-duration) * -0.66);
  30. }
  31. @-webkit-keyframes twinkle {
  32. 25% {
  33. opacity: 0;
  34. }
  35. }
  36. @keyframes twinkle {
  37. 25% {
  38. opacity: 0;
  39. }
  40. }
  41. .star {
  42. fill: white;
  43. }
  44. .star:nth-child(3n) {
  45. opacity: 0.8;
  46. }
  47. .star:nth-child(7n) {
  48. opacity: 0.6;
  49. }
  50. .star:nth-child(13n) {
  51. opacity: 0.4;
  52. }
  53. .star:nth-child(19n) {
  54. opacity: 0.2;
  55. }
  56. .comet {
  57. -webkit-transform-origin: center center;
  58. transform-origin: center center;
  59. -webkit-animation: comet 10s linear infinite;
  60. animation: comet 10s linear infinite;
  61. }
  62. @-webkit-keyframes comet {
  63. 0%,
  64. 40% {
  65. -webkit-transform: translateX(0);
  66. transform: translateX(0);
  67. opacity: 0;
  68. }
  69. 50% {
  70. opacity: 1;
  71. }
  72. 60%,
  73. 100% {
  74. -webkit-transform: translateX(-100vmax);
  75. transform: translateX(-100vmax);
  76. opacity: 0;
  77. }
  78. }
  79. @keyframes comet {
  80. 0%,
  81. 40% {
  82. -webkit-transform: translateX(0);
  83. transform: translateX(0);
  84. opacity: 0;
  85. }
  86. 50% {
  87. opacity: 1;
  88. }
  89. 60%,
  90. 100% {
  91. -webkit-transform: translateX(-100vmax);
  92. transform: translateX(-100vmax);
  93. opacity: 0;
  94. }
  95. }
  96. .comet-b {
  97. -webkit-animation-delay: -3.3s;
  98. animation-delay: -3.3s;
  99. }
  100. .comet-c {
  101. -webkit-animation-delay: -5s;
  102. animation-delay: -5s;
  103. }