style.css 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334
  1. body {
  2. background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  3. height: 100vh;
  4. overflow: hidden;
  5. font-family: 'Anton', sans-serif;
  6. justify-content: center;
  7. align-items: center;
  8. }
  9. .night {
  10. position: relative;
  11. width: 100%;
  12. height: 100%;
  13. -webkit-transform: rotateZ(45deg);
  14. transform: rotateZ(45deg);
  15. /* -webkit-animation: sky 200000ms linear infinite;
  16. animation: sky 200000ms linear infinite; */
  17. }
  18. .shooting_star {
  19. position: absolute;
  20. left: 50%;
  21. top: 50%;
  22. height: 2px;
  23. background: linear-gradient(-45deg, #5f91ff, rgba(0, 0, 255, 0));
  24. border-radius: 999px;
  25. -webkit-filter: drop-shadow(0 0 6px #699bff);
  26. filter: drop-shadow(0 0 6px #699bff);
  27. -webkit-animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
  28. animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
  29. }
  30. /* .shooting_star::before, .shooting_star::after {
  31. content: '';
  32. position: absolute;
  33. top: calc(50% - 1px);
  34. right: 0;
  35. height: 2px;
  36. background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0));
  37. -webkit-transform: translateX(50%) rotateZ(45deg);
  38. transform: translateX(50%) rotateZ(45deg);
  39. border-radius: 100%;
  40. -webkit-animation: shining 3000ms ease-in-out infinite;
  41. animation: shining 3000ms ease-in-out infinite;
  42. } */
  43. /* .shooting_star::after {
  44. -webkit-transform: translateX(50%) rotateZ(-45deg);
  45. transform: translateX(50%) rotateZ(-45deg);
  46. } */
  47. .shooting_star:nth-child(1) {
  48. top: calc(50% - 185px);
  49. left: calc(50% - 150px);
  50. -webkit-animation-delay: 8971ms;
  51. animation-delay: 8971ms;
  52. }
  53. .shooting_star:nth-child(1)::before, .shooting_star:nth-child(1)::after, .shooting_star:nth-child(1)::after {
  54. -webkit-animation-delay: 8971ms;
  55. animation-delay: 8971ms;
  56. }
  57. .shooting_star:nth-child(2) {
  58. top: calc(50% - 50px);
  59. left: calc(50% - 179px);
  60. -webkit-animation-delay: 9256ms;
  61. animation-delay: 9256ms;
  62. }
  63. .shooting_star:nth-child(2)::before, .shooting_star:nth-child(2)::after, .shooting_star:nth-child(2)::after {
  64. -webkit-animation-delay: 9256ms;
  65. animation-delay: 9256ms;
  66. }
  67. .shooting_star:nth-child(3) {
  68. top: calc(50% - -146px);
  69. left: calc(50% - 135px);
  70. -webkit-animation-delay: 8700ms;
  71. animation-delay: 8700ms;
  72. }
  73. .shooting_star:nth-child(3)::before, .shooting_star:nth-child(3)::after, .shooting_star:nth-child(3)::after {
  74. -webkit-animation-delay: 8700ms;
  75. animation-delay: 8700ms;
  76. }
  77. .shooting_star:nth-child(4) {
  78. top: calc(50% - -77px);
  79. left: calc(50% - 157px);
  80. -webkit-animation-delay: 3147ms;
  81. animation-delay: 3147ms;
  82. }
  83. .shooting_star:nth-child(4)::before, .shooting_star:nth-child(4)::after, .shooting_star:nth-child(4)::after {
  84. -webkit-animation-delay: 3147ms;
  85. animation-delay: 3147ms;
  86. }
  87. .shooting_star:nth-child(5) {
  88. top: calc(50% - -183px);
  89. left: calc(50% - 8px);
  90. -webkit-animation-delay: 6588ms;
  91. animation-delay: 6588ms;
  92. }
  93. .shooting_star:nth-child(5)::before, .shooting_star:nth-child(5)::after, .shooting_star:nth-child(5)::after {
  94. -webkit-animation-delay: 6588ms;
  95. animation-delay: 6588ms;
  96. }
  97. .shooting_star:nth-child(6) {
  98. top: calc(50% - -29px);
  99. left: calc(50% - 195px);
  100. -webkit-animation-delay: 8009ms;
  101. animation-delay: 8009ms;
  102. }
  103. .shooting_star:nth-child(6)::before, .shooting_star:nth-child(6)::after, .shooting_star:nth-child(6)::after {
  104. -webkit-animation-delay: 8009ms;
  105. animation-delay: 8009ms;
  106. }
  107. .shooting_star:nth-child(7) {
  108. top: calc(50% - 95px);
  109. left: calc(50% - 69px);
  110. -webkit-animation-delay: 5420ms;
  111. animation-delay: 5420ms;
  112. }
  113. .shooting_star:nth-child(7)::before, .shooting_star:nth-child(7)::after, .shooting_star:nth-child(7)::after {
  114. -webkit-animation-delay: 5420ms;
  115. animation-delay: 5420ms;
  116. }
  117. .shooting_star:nth-child(8) {
  118. top: calc(50% - -59px);
  119. left: calc(50% - 70px);
  120. -webkit-animation-delay: 9378ms;
  121. animation-delay: 9378ms;
  122. }
  123. .shooting_star:nth-child(8)::before, .shooting_star:nth-child(8)::after, .shooting_star:nth-child(8)::after {
  124. -webkit-animation-delay: 9378ms;
  125. animation-delay: 9378ms;
  126. }
  127. .shooting_star:nth-child(9) {
  128. top: calc(50% - 76px);
  129. left: calc(50% - 238px);
  130. -webkit-animation-delay: 2845ms;
  131. animation-delay: 2845ms;
  132. }
  133. .shooting_star:nth-child(9)::before, .shooting_star:nth-child(9)::after, .shooting_star:nth-child(9)::after {
  134. -webkit-animation-delay: 2845ms;
  135. animation-delay: 2845ms;
  136. }
  137. .shooting_star:nth-child(10) {
  138. top: calc(50% - 83px);
  139. left: calc(50% - 6px);
  140. -webkit-animation-delay: 5205ms;
  141. animation-delay: 5205ms;
  142. }
  143. .shooting_star:nth-child(10)::before, .shooting_star:nth-child(10)::after, .shooting_star:nth-child(10)::after {
  144. -webkit-animation-delay: 5205ms;
  145. animation-delay: 5205ms;
  146. }
  147. .shooting_star:nth-child(11) {
  148. top: calc(50% - -137px);
  149. left: calc(50% - 267px);
  150. -webkit-animation-delay: 808ms;
  151. animation-delay: 808ms;
  152. }
  153. .shooting_star:nth-child(11)::before, .shooting_star:nth-child(11)::after, .shooting_star:nth-child(11)::after {
  154. -webkit-animation-delay: 808ms;
  155. animation-delay: 808ms;
  156. }
  157. .shooting_star:nth-child(12) {
  158. top: calc(50% - 12px);
  159. left: calc(50% - 8px);
  160. -webkit-animation-delay: 2406ms;
  161. animation-delay: 2406ms;
  162. }
  163. .shooting_star:nth-child(12)::before, .shooting_star:nth-child(12)::after, .shooting_star:nth-child(12)::after {
  164. -webkit-animation-delay: 2406ms;
  165. animation-delay: 2406ms;
  166. }
  167. .shooting_star:nth-child(13) {
  168. top: calc(50% - 148px);
  169. left: calc(50% - 47px);
  170. -webkit-animation-delay: 7566ms;
  171. animation-delay: 7566ms;
  172. }
  173. .shooting_star:nth-child(13)::before, .shooting_star:nth-child(13)::after, .shooting_star:nth-child(13)::after {
  174. -webkit-animation-delay: 7566ms;
  175. animation-delay: 7566ms;
  176. }
  177. .shooting_star:nth-child(14) {
  178. top: calc(50% - -28px);
  179. left: calc(50% - 75px);
  180. -webkit-animation-delay: 7634ms;
  181. animation-delay: 7634ms;
  182. }
  183. .shooting_star:nth-child(14)::before, .shooting_star:nth-child(14)::after, .shooting_star:nth-child(14)::after {
  184. -webkit-animation-delay: 7634ms;
  185. animation-delay: 7634ms;
  186. }
  187. .shooting_star:nth-child(15) {
  188. top: calc(50% - -37px);
  189. left: calc(50% - 203px);
  190. -webkit-animation-delay: 7743ms;
  191. animation-delay: 7743ms;
  192. }
  193. .shooting_star:nth-child(15)::before, .shooting_star:nth-child(15)::after, .shooting_star:nth-child(15)::after {
  194. -webkit-animation-delay: 7743ms;
  195. animation-delay: 7743ms;
  196. }
  197. .shooting_star:nth-child(16) {
  198. top: calc(50% - 41px);
  199. left: calc(50% - 256px);
  200. -webkit-animation-delay: 2888ms;
  201. animation-delay: 2888ms;
  202. }
  203. .shooting_star:nth-child(16)::before, .shooting_star:nth-child(16)::after, .shooting_star:nth-child(16)::after {
  204. -webkit-animation-delay: 2888ms;
  205. animation-delay: 2888ms;
  206. }
  207. .shooting_star:nth-child(17) {
  208. top: calc(50% - -35px);
  209. left: calc(50% - 121px);
  210. -webkit-animation-delay: 5864ms;
  211. animation-delay: 5864ms;
  212. }
  213. .shooting_star:nth-child(17)::before, .shooting_star:nth-child(17)::after, .shooting_star:nth-child(17)::after {
  214. -webkit-animation-delay: 5864ms;
  215. animation-delay: 5864ms;
  216. }
  217. .shooting_star:nth-child(18) {
  218. top: calc(50% - 73px);
  219. left: calc(50% - 225px);
  220. -webkit-animation-delay: 7883ms;
  221. animation-delay: 7883ms;
  222. }
  223. .shooting_star:nth-child(18)::before, .shooting_star:nth-child(18)::after, .shooting_star:nth-child(18)::after {
  224. -webkit-animation-delay: 7883ms;
  225. animation-delay: 7883ms;
  226. }
  227. .shooting_star:nth-child(19) {
  228. top: calc(50% - -69px);
  229. left: calc(50% - 47px);
  230. -webkit-animation-delay: 3339ms;
  231. animation-delay: 3339ms;
  232. }
  233. .shooting_star:nth-child(19)::before, .shooting_star:nth-child(19)::after, .shooting_star:nth-child(19)::after {
  234. -webkit-animation-delay: 3339ms;
  235. animation-delay: 3339ms;
  236. }
  237. .shooting_star:nth-child(20) {
  238. top: calc(50% - 162px);
  239. left: calc(50% - 129px);
  240. -webkit-animation-delay: 7963ms;
  241. animation-delay: 7963ms;
  242. }
  243. .shooting_star:nth-child(20)::before, .shooting_star:nth-child(20)::after, .shooting_star:nth-child(20)::after {
  244. -webkit-animation-delay: 7963ms;
  245. animation-delay: 7963ms;
  246. }
  247. @-webkit-keyframes tail {
  248. 0% {
  249. width: 0;
  250. }
  251. 30% {
  252. width: 100px;
  253. }
  254. 100% {
  255. width: 0;
  256. }
  257. }
  258. @keyframes tail {
  259. 0% {
  260. width: 0;
  261. }
  262. 30% {
  263. width: 100px;
  264. }
  265. 100% {
  266. width: 0;
  267. }
  268. }
  269. @-webkit-keyframes shining {
  270. 0% {
  271. width: 0;
  272. }
  273. 50% {
  274. width: 30px;
  275. }
  276. 100% {
  277. width: 0;
  278. }
  279. }
  280. @keyframes shining {
  281. 0% {
  282. width: 0;
  283. }
  284. 50% {
  285. width: 30px;
  286. }
  287. 100% {
  288. width: 0;
  289. }
  290. }
  291. @-webkit-keyframes shooting {
  292. 0% {
  293. -webkit-transform: translateX(0);
  294. transform: translateX(0);
  295. }
  296. 100% {
  297. -webkit-transform: translateX(300px);
  298. transform: translateX(300px);
  299. }
  300. }
  301. @keyframes shooting {
  302. 0% {
  303. -webkit-transform: translateX(0);
  304. transform: translateX(0);
  305. }
  306. 100% {
  307. -webkit-transform: translateX(300px);
  308. transform: translateX(300px);
  309. }
  310. }
  311. @-webkit-keyframes sky {
  312. 0% {
  313. -webkit-transform: rotate(45deg);
  314. transform: rotate(45deg);
  315. }
  316. 100% {
  317. -webkit-transform: rotate(405deg);
  318. transform: rotate(405deg);
  319. }
  320. }
  321. @keyframes sky {
  322. 0% {
  323. -webkit-transform: rotate(45deg);
  324. transform: rotate(45deg);
  325. }
  326. 100% {
  327. -webkit-transform: rotate(405deg);
  328. transform: rotate(405deg);
  329. }
  330. }