在添加了CSV文件之后，HTML文件中的链接不再起作用。

huangapple
go评论102阅读模式
英文:

After adding a csv file, the links in the html file do not work anymore

问题

链接因某种原因不可点击。

英文:

I have stopped working links in html after adding style.css, when I remove style.css all links work again. No matter how I add links they do not work anyway. I have attached the index.html and style.css file below, Any help with the code would be great!
index.html

  4.     <link rel="stylesheet" type="text/css" href="style.css">
  5. </head>
  6. <body>
  7.     <!-- stars -->
  8.     <div class="stars">
  9.         <div class="star"></div>
  10.         <div class="star"></div>
  11.         <div class="star"></div>
  12.         <div class="star"></div>
  13.         <div class="star"></div>
  14.         <div class="star"></div>
  15.         <div class="star"></div>
  16.         <div class="star"></div>
  17.         <div class="star"></div>
  18.         <div class="star"></div>
  19.         <div class="star"></div>
  20.         <div class="star"></div>
  21.         <div class="star"></div>
  22.         <div class="star"></div>
  23.         <div class="star"></div>
  24.         <div class="star"></div>
  25.         <div class="star"></div>
  26.         <div class="star"></div>
  27.         <div class="star"></div>
  28.         <div class="star"></div>
  29.         <div class="star"></div>
  30.         <div class="star"></div>
  31.         <div class="star"></div>
  32.         <div class="star"></div>
  33.         <div class="star"></div>
  34.         <div class="star"></div>
  35.         <div class="star"></div>
  36.         <div class="star"></div>
  37.         <div class="star"></div>
  38.         <div class="star"></div>
  39.         <div class="star"></div>
  40.         <div class="star"></div>
  41.         <div class="star"></div>
  42.         <div class="star"></div>
  43.         <div class="star"></div>
  44.         <div class="star"></div>
  45.         <div class="star"></div>
  46.         <div class="star"></div>
  47.         <div class="star"></div>
  48.         <div class="star"></div>
  49.         <div class="star"></div>
  50.         <div class="star"></div>
  51.         <div class="star"></div>
  52.         <div class="star"></div>
  53.         <div class="star"></div>
  54.         <div class="star"></div>
  55.         <div class="star"></div>
  56.         <div class="star"></div>
  57.         <div class="star"></div>
  58.         <div class="star"></div>
  59.     </div>
  60.     </div>
  61.     
  62.     <!-- head -->
  63.     <header>
  64.         <div>
  65.             <a href="index.html" style="position: absolute; top: 40px; left: 80px;">
  66.                 <img src="media/logoo.png" alt="logo" style="width: 150px; height: auto; clip: rect(0px, 100px, 50px, 0px);">
  67.             </a>
  68.         </div>
  69.         <div>
  70.             <p class="main"><a href="https://fixedfloat.com/about" style="text-decoration: none;">About</a></p>
  71.         </div>
  72.     </header>
  73. </body>
  74. </html>

style.css

  1. body {
  2. display: flex;
  3. justify-content: center;
  4. align-items: center;
  5. min-height: 100vh;
  6. background: radial-gradient(ellipse at bottom, #0d1d31 0%, #0c0d13 100%);
  7. overflow: hidden;
  8. color: #5e9ce2;
  9. }
  10. .stars {
  11. position: fixed;
  12. top: 0;
  13. left: 0;
  14. width: 100%;
  15. height: 120%;
  16. transform: rotate(-45deg);
  17. }
  18. .star {
  19. --star-color: var(--primary-color);
  20. --star-tail-length: 6em;
  21. --star-tail-height: 2px;
  22. --star-width: calc(var(--star-tail-length) / 6);
  23. --fall-duration: 9s;
  24. --tail-fade-duration: var(--fall-duration);
  25. position: absolute;
  26. top: var(--top-offset);
  27. left: 0;
  28. width: var(--star-tail-length);
  29. height: var(--star-tail-height);
  30. color: var(--star-color);
  31. background: linear-gradient(45deg, currentColor, transparent);
  32. border-radius: 50%;
  33. filter: drop-shadow(0 0 6px currentColor);
  34. transform: translate3d(104em, 0, 0);
  35. animation: fall var(--fall-duration) var(--fall-delay) linear infinite, tail-fade var(--tail-fade-duration) var(--fall-delay) ease-out infinite;
  36. }
  37. @media screen and (max-width: 750px) {
  38. .star {
  39. animation: fall var(--fall-duration) var(--fall-delay) linear infinite;
  40. }
  41. }
  42. .star:nth-child(1) {
  43. --star-tail-length: 7.42em;
  44. --top-offset: 91.42vh;
  45. --fall-duration: 10.883s;
  46. --fall-delay: 9.243s;
  47. }
  48. .star:nth-child(2) {
  49. --star-tail-length: 5.65em;
  50. --top-offset: 35.2vh;
  51. --fall-duration: 9.348s;
  52. --fall-delay: 9.487s;
  53. }
  54. .star:nth-child(3) {
  55. --star-tail-length: 6.5em;
  56. --top-offset: 44.59vh;
  57. --fall-duration: 9.189s;
  58. --fall-delay: 4.048s;
  59. }
  60. .star:nth-child(4) {
  61. --star-tail-length: 6.05em;
  62. --top-offset: 52.39vh;
  63. --fall-duration: 7.227s;
  64. --fall-delay: 2.644s;
  65. }
  66. .star:nth-child(5) {
  67. --star-tail-length: 5.66em;
  68. --top-offset: 13.38vh;
  69. --fall-duration: 6.508s;
  70. --fall-delay: 4.468s;
  71. }
  72. .star:nth-child(6) {
  73. --star-tail-length: 6.4em;
  74. --top-offset: 16.82vh;
  75. --fall-duration: 9.272s;
  76. --fall-delay: 3.234s;
  77. }
  78. .star:nth-child(7) {
  79. --star-tail-length: 5.21em;
  80. --top-offset: 54.97vh;
  81. --fall-duration: 9.353s;
  82. --fall-delay: 5.9s;
  83. }
  84. .star:nth-child(8) {
  85. --star-tail-length: 5.15em;
  86. --top-offset: 78.08vh;
  87. --fall-duration: 11.137s;
  88. --fall-delay: 7.126s;
  89. }
  90. .star:nth-child(9) {
  91. --star-tail-length: 7em;
  92. --top-offset: 73.39vh;
  93. --fall-duration: 8.93s;
  94. --fall-delay: 6.951s;
  95. }
  96. .star:nth-child(10) {
  97. --star-tail-length: 7.48em;
  98. --top-offset: 98.16vh;
  99. --fall-duration: 10.745s;
  100. --fall-delay: 2.463s;
  101. }
  102. .star:nth-child(11) {
  103. --star-tail-length: 6.31em;
  104. --top-offset: 47.97vh;
  105. --fall-duration: 11.58s;
  106. --fall-delay: 1.812s;
  107. }
  108. .star:nth-child(12) {
  109. --star-tail-length: 6.2em;
  110. --top-offset: 3.8vh;
  111. --fall-duration: 10.272s;
  112. --fall-delay: 1.493s;
  113. }
  114. .star:nth-child(13) {
  115. --star-tail-length: 5.44em;
  116. --top-offset: 66.21vh;
  117. --fall-duration: 8.307s;
  118. --fall-delay: 8.897s;
  119. }
  120. .star:nth-child(14) {
  121. --star-tail-length: 5.61em;
  122. --top-offset: 57.55vh;
  123. --fall-duration: 7.163s;
  124. --fall-delay: 7.239s;
  125. }
  126. .star:nth-child(15) {
  127. --star-tail-length: 6.35em;
  128. --top-offset: 80.38vh;
  129. --fall-duration: 9.348s;
  130. --fall-delay: 2.744s;
  131. }
  132. .star:nth-child(16) {
  133. --star-tail-length: 5.99em;
  134. --top-offset: 52.43vh;
  135. --fall-duration: 10.049s;
  136. --fall-delay: 6.638s;
  137. }
  138. .star:nth-child(17) {
  139. --star-tail-length: 5.63em;
  140. --top-offset: 16.33vh;
  141. --fall-duration: 9.944s;
  142. --fall-delay: 4.792s;
  143. }
  144. .star:nth-child(18) {
  145. --star-tail-length: 5.21em;
  146. --top-offset: 36.16vh;
  147. --fall-duration: 8.625s;
  148. --fall-delay: 0.086s;
  149. }
  150. .star:nth-child(19) {
  151. --star-tail-length: 7em;
  152. --top-offset: 86.83vh;
  153. --fall-duration: 7.006s;
  154. --fall-delay: 7.969s;
  155. }
  156. .star:nth-child(20) {
  157. --star-tail-length: 7.49em;
  158. --top-offset: 71vh;
  159. --fall-duration: 10.418s;
  160. --fall-delay: 5.522s;
  161. }
  162. .star:nth-child(21) {
  163. --star-tail-length: 6.39em;
  164. --top-offset: 57.2vh;
  165. --fall-duration: 10.747s;
  166. --fall-delay: 6.503s;
  167. }
  168. .star:nth-child(22) {
  169. --star-tail-length: 5.06em;
  170. --top-offset: 3.87vh;
  171. --fall-duration: 9.784s;
  172. --fall-delay: 1.126s;
  173. }
  174. .star:nth-child(23) {
  175. --star-tail-length: 7.49em;
  176. --top-offset: 61.12vh;
  177. --fall-duration: 9.994s;
  178. --fall-delay: 6.287s;
  179. }
  180. .star:nth-child(24) {
  181. --star-tail-length: 5.1em;
  182. --top-offset: 73.65vh;
  183. --fall-duration: 11.455s;
  184. --fall-delay: 6.274s;
  185. }
  186. .star:nth-child(25) {
  187. --star-tail-length: 7.14em;
  188. --top-offset: 52.58vh;
  189. --fall-duration: 7.936s;
  190. --fall-delay: 4.428s;
  191. }
  192. .star:nth-child(26) {
  193. --star-tail-length: 6.79em;
  194. --top-offset: 0.02vh;
  195. --fall-duration: 11.395s;
  196. --fall-delay: 3.252s;
  197. }
  198. .star:nth-child(27) {
  199. --star-tail-length: 5.76em;
  200. --top-offset: 79.27vh;
  201. --fall-duration: 9.931s;
  202. --fall-delay: 6.989s;
  203. }
  204. .star:nth-child(28) {
  205. --star-tail-length: 5.03em;
  206. --top-offset: 20.34vh;
  207. --fall-duration: 10.47s;
  208. --fall-delay: 3.472s;
  209. }
  210. .star:nth-child(29) {
  211. --star-tail-length: 6.7em;
  212. --top-offset: 41.33vh;
  213. --fall-duration: 11.859s;
  214. --fall-delay: 5.425s;
  215. }
  216. .star:nth-child(30) {
  217. --star-tail-length: 6.31em;
  218. --top-offset: 5.13vh;
  219. --fall-duration: 8.906s;
  220. --fall-delay: 6.664s;
  221. }
  222. .star:nth-child(31) {
  223. --star-tail-length: 5.72em;
  224. --top-offset: 56.37vh;
  225. --fall-duration: 6.21s;
  226. --fall-delay: 2.698s;
  227. }
  228. .star:nth-child(32) {
  229. --star-tail-length: 6.42em;
  230. --top-offset: 44.21vh;
  231. --fall-duration: 8.828s;
  232. --fall-delay: 0.776s;
  233. }
  234. .star:nth-child(33) {
  235. --star-tail-length: 6.63em;
  236. --top-offset: 78.63vh;
  237. --fall-duration: 9.743s;
  238. --fall-delay: 0.937s;
  239. }
  240. .star:nth-child(34) {
  241. --star-tail-length: 5.22em;
  242. --top-offset: 69.82vh;
  243. --fall-duration: 7.973s;
  244. --fall-delay: 4.881s;
  245. }
  246. .star:nth-child(35) {
  247. --star-tail-length: 6.72em;
  248. --top-offset: 26.81vh;
  249. --fall-duration: 6.534s;
  250. --fall-delay: 9.414s;
  251. }
  252. .star:nth-child(36) {
  253. --star-tail-length: 6.84em;
  254. --top-offset: 1.07vh;
  255. --fall-duration: 7.474s;
  256. --fall-delay: 8.621s;
  257. }
  258. .star:nth-child(37) {
  259. --star-tail-length: 5.52em;
  260. --top-offset: 61.71vh;
  261. --fall-duration: 8.469s;
  262. --fall-delay: 7.25s;
  263. }
  264. .star:nth-child(38) {
  265. --star-tail-length: 6.83em;
  266. --top-offset: 83.01vh;
  267. --fall-duration: 7.611s;
  268. --fall-delay: 6.944s;
  269. }
  270. .star:nth-child(39) {
  271. --star-tail-length: 7.47em;
  272. --top-offset: 36.06vh;
  273. --fall-duration: 8.648s;
  274. --fall-delay: 0.575s;
  275. }
  276. .star:nth-child(40) {
  277. --star-tail-length: 5.18em;
  278. --top-offset: 26.24vh;
  279. --fall-duration: 10.058s;
  280. --fall-delay: 9.153s;
  281. }
  282. .star:nth-child(41) {
  283. --star-tail-length: 6.47em;
  284. --top-offset: 21.26vh;
  285. --fall-duration: 10.039s;
  286. --fall-delay: 2.669s;
  287. }
  288. .star:nth-child(42) {
  289. --star-tail-length: 5.48em;
  290. --top-offset: 6.51vh;
  291. --fall-duration: 6.084s;
  292. --fall-delay: 0.54s;
  293. }
  294. .star:nth-child(43) {
  295. --star-tail-length: 7.18em;
  296. --top-offset: 23.12vh;
  297. --fall-duration: 10.773s;
  298. --fall-delay: 4.242s;
  299. }
  300. .star:nth-child(44) {
  301. --star-tail-length: 6.56em;
  302. --top-offset: 64.95vh;
  303. --fall-duration: 9.882s;
  304. --fall-delay: 0.671s;
  305. }
  306. .star:nth-child(45) {
  307. --star-tail-length: 7.49em;
  308. --top-offset: 62.5vh;
  309. --fall-duration: 6.65s;
  310. --fall-delay: 7.761s;
  311. }
  312. .star:nth-child(46) {
  313. --star-tail-length: 5.12em;
  314. --top-offset: 46.39vh;
  315. --fall-duration: 7.437s;
  316. --fall-delay: 6.915s;
  317. }
  318. .star:nth-child(47) {
  319. --star-tail-length: 6.97em;
  320. --top-offset: 60.45vh;
  321. --fall-duration: 8.868s;
  322. --fall-delay: 9.445s;
  323. }
  324. .star:nth-child(48) {
  325. --star-tail-length: 6.19em;
  326. --top-offset: 21.42vh;
  327. --fall-duration: 11.275s;
  328. --fall-delay: 2.53s;
  329. }
  330. .star:nth-child(49) {
  331. --star-tail-length: 7.3em;
  332. --top-offset: 36.19vh;
  333. --fall-duration: 11.297s;
  334. --fall-delay: 1.341s;
  335. }
  336. .star:nth-child(50) {
  337. --star-tail-length: 5.31em;
  338. --top-offset: 70.3vh;
  339. --fall-duration: 11.481s;
  340. --fall-delay: 6.827s;
  341. }
  342. .star::before, .star::after {
  343. position: absolute;
  344. content: "";
  345. top: 0;
  346. left: calc(var(--star-width) / -2);
  347. width: var(--star-width);
  348. height: 100%;
  349. background: linear-gradient(45deg, transparent, currentColor, transparent);
  350. border-radius: inherit;
  351. animation: blink 2s linear infinite;
  352. }
  353. .star::before {
  354. transform: rotate(45deg);
  355. }
  356. .star::after {
  357. transform: rotate(-45deg);
  358. }
  359. @keyframes fall {
  360. to {
  361. transform: translate3d(-30em, 0, 0);
  362. }
  363. }
  364. @keyframes tail-fade {
  365. 0%, 50% {
  366. width: var(--star-tail-length);
  367. opacity: 1;
  368. }
  369. 70%, 80% {
  370. width: 0;
  371. opacity: 0.4;
  372. }
  373. 100% {
  374. width: 0;
  375. opacity: 0;
  376. }
  377. }
  378. @keyframes blink {
  379. 50% {
  380. opacity: 0.6;
  381. }
  382. }/*# sourceMappingURL=style.css.map */

the link is not clickable for some reason

答案1

得分: 1

Remove the extra closing </div> after the stars div and adding z-index in your stars class will fix the problem.

  2. <!-- language: lang-css -->
  3. body {
  4. display: flex;
  5. justify-content: center;
  6. align-items: center;
  7. min-height: 100vh;
  8. background: radial-gradient(ellipse at bottom, #0d1d31 0%, #0c0d13 100%);
  9. overflow: hidden;
  10. color: #5e9ce2;
  11. }
  12. .stars {
  13. position: fixed;
  14. top: 0;
  15. left: 0;
  16. width: 100%;
  17. height: 120%;
  18. transform: rotate(-45deg);
  19. z-index: -1; // Add this line
  20. }
  21. .star {
  22. --star-color: var(--primary-color);
  23. --star-tail-length: 6em;
  24. --star-tail-height: 2px;
  25. --star-width: calc(var(--star-tail-length) / 6);
  26. --fall-duration: 9s;
  27. --tail-fade-duration: var(--fall-duration);
  28. position: absolute;
  29. top: var(--top-offset);
  30. left: 0;
  31. width: var(--star-tail-length);
  32. height: var(--star-tail-height);
  33. color: var(--star-color);
  34. background: linear-gradient(45deg, currentColor, transparent);
  35. border-radius: 50%;
  36. filter: drop-shadow(0 0 6px currentColor);
  37. transform: translate3d(104em, 0, 0);
  38. animation: fall var(--fall-duration) var(--fall-delay) linear infinite, tail-fade var(--tail-fade-duration) var(--fall-delay) ease-out infinite;
  39. }
  40. @media screen and (max-width: 750px) {
  41. .star {
  42. animation: fall var(--fall-duration) var(--fall-delay) linear infinite;
  43. }
  44. }
  45. .star:nth-child(1) {
  46. --star-tail-length: 7.42em;
  47. --top-offset: 91.42vh;
  48. --fall-duration: 10.883s;
  49. --fall-delay: 9.243s;
  50. }
  51. .star:nth-child(2) {
  52. --star-tail-length: 5.65em;
  53. --top-offset: 35.2vh;
  54. --fall-duration: 9.348s;
  55. --fall-delay: 9.487s;
  56. }
  57. // ... (remaining CSS properties)
英文:

Remove the extra closing </div> after the stars div and adding z-index in your stars class will fix the problem.

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-css -->

  1. body {
  2. display: flex;
  3. justify-content: center;
  4. align-items: center;
  5. min-height: 100vh;
  6. background: radial-gradient(ellipse at bottom, #0d1d31 0%, #0c0d13 100%);
  7. overflow: hidden;
  8. color: #5e9ce2;
  9. }
  10. .stars {
  11. position: fixed;
  12. top: 0;
  13. left: 0;
  14. width: 100%;
  15. height: 120%;
  16. transform: rotate(-45deg);
  17. z-index: -1;
  18. }
  19. .star {
  20. --star-color: var(--primary-color);
  21. --star-tail-length: 6em;
  22. --star-tail-height: 2px;
  23. --star-width: calc(var(--star-tail-length) / 6);
  24. --fall-duration: 9s;
  25. --tail-fade-duration: var(--fall-duration);
  26. position: absolute;
  27. top: var(--top-offset);
  28. left: 0;
  29. width: var(--star-tail-length);
  30. height: var(--star-tail-height);
  31. color: var(--star-color);
  32. background: linear-gradient(45deg, currentColor, transparent);
  33. border-radius: 50%;
  34. filter: drop-shadow(0 0 6px currentColor);
  35. transform: translate3d(104em, 0, 0);
  36. animation: fall var(--fall-duration) var(--fall-delay) linear infinite, tail-fade var(--tail-fade-duration) var(--fall-delay) ease-out infinite;
  37. }
  38. @media screen and (max-width: 750px) {
  39. .star {
  40. animation: fall var(--fall-duration) var(--fall-delay) linear infinite;
  41. }
  42. }
  43. .star:nth-child(1) {
  44. --star-tail-length: 7.42em;
  45. --top-offset: 91.42vh;
  46. --fall-duration: 10.883s;
  47. --fall-delay: 9.243s;
  48. }
  49. .star:nth-child(2) {
  50. --star-tail-length: 5.65em;
  51. --top-offset: 35.2vh;
  52. --fall-duration: 9.348s;
  53. --fall-delay: 9.487s;
  54. }
  55. .star:nth-child(3) {
  56. --star-tail-length: 6.5em;
  57. --top-offset: 44.59vh;
  58. --fall-duration: 9.189s;
  59. --fall-delay: 4.048s;
  60. }
  61. .star:nth-child(4) {
  62. --star-tail-length: 6.05em;
  63. --top-offset: 52.39vh;
  64. --fall-duration: 7.227s;
  65. --fall-delay: 2.644s;
  66. }
  67. .star:nth-child(5) {
  68. --star-tail-length: 5.66em;
  69. --top-offset: 13.38vh;
  70. --fall-duration: 6.508s;
  71. --fall-delay: 4.468s;
  72. }
  73. .star:nth-child(6) {
  74. --star-tail-length: 6.4em;
  75. --top-offset: 16.82vh;
  76. --fall-duration: 9.272s;
  77. --fall-delay: 3.234s;
  78. }
  79. .star:nth-child(7) {
  80. --star-tail-length: 5.21em;
  81. --top-offset: 54.97vh;
  82. --fall-duration: 9.353s;
  83. --fall-delay: 5.9s;
  84. }
  85. .star:nth-child(8) {
  86. --star-tail-length: 5.15em;
  87. --top-offset: 78.08vh;
  88. --fall-duration: 11.137s;
  89. --fall-delay: 7.126s;
  90. }
  91. .star:nth-child(9) {
  92. --star-tail-length: 7em;
  93. --top-offset: 73.39vh;
  94. --fall-duration: 8.93s;
  95. --fall-delay: 6.951s;
  96. }
  97. .star:nth-child(10) {
  98. --star-tail-length: 7.48em;
  99. --top-offset: 98.16vh;
  100. --fall-duration: 10.745s;
  101. --fall-delay: 2.463s;
  102. }
  103. .star:nth-child(11) {
  104. --star-tail-length: 6.31em;
  105. --top-offset: 47.97vh;
  106. --fall-duration: 11.58s;
  107. --fall-delay: 1.812s;
  108. }
  109. .star:nth-child(12) {
  110. --star-tail-length: 6.2em;
  111. --top-offset: 3.8vh;
  112. --fall-duration: 10.272s;
  113. --fall-delay: 1.493s;
  114. }
  115. .star:nth-child(13) {
  116. --star-tail-length: 5.44em;
  117. --top-offset: 66.21vh;
  118. --fall-duration: 8.307s;
  119. --fall-delay: 8.897s;
  120. }
  121. .star:nth-child(14) {
  122. --star-tail-length: 5.61em;
  123. --top-offset: 57.55vh;
  124. --fall-duration: 7.163s;
  125. --fall-delay: 7.239s;
  126. }
  127. .star:nth-child(15) {
  128. --star-tail-length: 6.35em;
  129. --top-offset: 80.38vh;
  130. --fall-duration: 9.348s;
  131. --fall-delay: 2.744s;
  132. }
  133. .star:nth-child(16) {
  134. --star-tail-length: 5.99em;
  135. --top-offset: 52.43vh;
  136. --fall-duration: 10.049s;
  137. --fall-delay: 6.638s;
  138. }
  139. .star:nth-child(17) {
  140. --star-tail-length: 5.63em;
  141. --top-offset: 16.33vh;
  142. --fall-duration: 9.944s;
  143. --fall-delay: 4.792s;
  144. }
  145. .star:nth-child(18) {
  146. --star-tail-length: 5.21em;
  147. --top-offset: 36.16vh;
  148. --fall-duration: 8.625s;
  149. --fall-delay: 0.086s;
  150. }
  151. .star:nth-child(19) {
  152. --star-tail-length: 7em;
  153. --top-offset: 86.83vh;
  154. --fall-duration: 7.006s;
  155. --fall-delay: 7.969s;
  156. }
  157. .star:nth-child(20) {
  158. --star-tail-length: 7.49em;
  159. --top-offset: 71vh;
  160. --fall-duration: 10.418s;
  161. --fall-delay: 5.522s;
  162. }
  163. .star:nth-child(21) {
  164. --star-tail-length: 6.39em;
  165. --top-offset: 57.2vh;
  166. --fall-duration: 10.747s;
  167. --fall-delay: 6.503s;
  168. }
  169. .star:nth-child(22) {
  170. --star-tail-length: 5.06em;
  171. --top-offset: 3.87vh;
  172. --fall-duration: 9.784s;
  173. --fall-delay: 1.126s;
  174. }
  175. .star:nth-child(23) {
  176. --star-tail-length: 7.49em;
  177. --top-offset: 61.12vh;
  178. --fall-duration: 9.994s;
  179. --fall-delay: 6.287s;
  180. }
  181. .star:nth-child(24) {
  182. --star-tail-length: 5.1em;
  183. --top-offset: 73.65vh;
  184. --fall-duration: 11.455s;
  185. --fall-delay: 6.274s;
  186. }
  187. .star:nth-child(25) {
  188. --star-tail-length: 7.14em;
  189. --top-offset: 52.58vh;
  190. --fall-duration: 7.936s;
  191. --fall-delay: 4.428s;
  192. }
  193. .star:nth-child(26) {
  194. --star-tail-length: 6.79em;
  195. --top-offset: 0.02vh;
  196. --fall-duration: 11.395s;
  197. --fall-delay: 3.252s;
  198. }
  199. .star:nth-child(27) {
  200. --star-tail-length: 5.76em;
  201. --top-offset: 79.27vh;
  202. --fall-duration: 9.931s;
  203. --fall-delay: 6.989s;
  204. }
  205. .star:nth-child(28) {
  206. --star-tail-length: 5.03em;
  207. --top-offset: 20.34vh;
  208. --fall-duration: 10.47s;
  209. --fall-delay: 3.472s;
  210. }
  211. .star:nth-child(29) {
  212. --star-tail-length: 6.7em;
  213. --top-offset: 41.33vh;
  214. --fall-duration: 11.859s;
  215. --fall-delay: 5.425s;
  216. }
  217. .star:nth-child(30) {
  218. --star-tail-length: 6.31em;
  219. --top-offset: 5.13vh;
  220. --fall-duration: 8.906s;
  221. --fall-delay: 6.664s;
  222. }
  223. .star:nth-child(31) {
  224. --star-tail-length: 5.72em;
  225. --top-offset: 56.37vh;
  226. --fall-duration: 6.21s;
  227. --fall-delay: 2.698s;
  228. }
  229. .star:nth-child(32) {
  230. --star-tail-length: 6.42em;
  231. --top-offset: 44.21vh;
  232. --fall-duration: 8.828s;
  233. --fall-delay: 0.776s;
  234. }
  235. .star:nth-child(33) {
  236. --star-tail-length: 6.63em;
  237. --top-offset: 78.63vh;
  238. --fall-duration: 9.743s;
  239. --fall-delay: 0.937s;
  240. }
  241. .star:nth-child(34) {
  242. --star-tail-length: 5.22em;
  243. --top-offset: 69.82vh;
  244. --fall-duration: 7.973s;
  245. --fall-delay: 4.881s;
  246. }
  247. .star:nth-child(35) {
  248. --star-tail-length: 6.72em;
  249. --top-offset: 26.81vh;
  250. --fall-duration: 6.534s;
  251. --fall-delay: 9.414s;
  252. }
  253. .star:nth-child(36) {
  254. --star-tail-length: 6.84em;
  255. --top-offset: 1.07vh;
  256. --fall-duration: 7.474s;
  257. --fall-delay: 8.621s;
  258. }
  259. .star:nth-child(37) {
  260. --star-tail-length: 5.52em;
  261. --top-offset: 61.71vh;
  262. --fall-duration: 8.469s;
  263. --fall-delay: 7.25s;
  264. }
  265. .star:nth-child(38) {
  266. --star-tail-length: 6.83em;
  267. --top-offset: 83.01vh;
  268. --fall-duration: 7.611s;
  269. --fall-delay: 6.944s;
  270. }
  271. .star:nth-child(39) {
  272. --star-tail-length: 7.47em;
  273. --top-offset: 36.06vh;
  274. --fall-duration: 8.648s;
  275. --fall-delay: 0.575s;
  276. }
  277. .star:nth-child(40) {
  278. --star-tail-length: 5.18em;
  279. --top-offset: 26.24vh;
  280. --fall-duration: 10.058s;
  281. --fall-delay: 9.153s;
  282. }
  283. .star:nth-child(41) {
  284. --star-tail-length: 6.47em;
  285. --top-offset: 21.26vh;
  286. --fall-duration: 10.039s;
  287. --fall-delay: 2.669s;
  288. }
  289. .star:nth-child(42) {
  290. --star-tail-length: 5.48em;
  291. --top-offset: 6.51vh;
  292. --fall-duration: 6.084s;
  293. --fall-delay: 0.54s;
  294. }
  295. .star:nth-child(43) {
  296. --star-tail-length: 7.18em;
  297. --top-offset: 23.12vh;
  298. --fall-duration: 10.773s;
  299. --fall-delay: 4.242s;
  300. }
  301. .star:nth-child(44) {
  302. --star-tail-length: 6.56em;
  303. --top-offset: 64.95vh;
  304. --fall-duration: 9.882s;
  305. --fall-delay: 0.671s;
  306. }
  307. .star:nth-child(45) {
  308. --star-tail-length: 7.49em;
  309. --top-offset: 62.5vh;
  310. --fall-duration: 6.65s;
  311. --fall-delay: 7.761s;
  312. }
  313. .star:nth-child(46) {
  314. --star-tail-length: 5.12em;
  315. --top-offset: 46.39vh;
  316. --fall-duration: 7.437s;
  317. --fall-delay: 6.915s;
  318. }
  319. .star:nth-child(47) {
  320. --star-tail-length: 6.97em;
  321. --top-offset: 60.45vh;
  322. --fall-duration: 8.868s;
  323. --fall-delay: 9.445s;
  324. }
  325. .star:nth-child(48) {
  326. --star-tail-length: 6.19em;
  327. --top-offset: 21.42vh;
  328. --fall-duration: 11.275s;
  329. --fall-delay: 2.53s;
  330. }
  331. .star:nth-child(49) {
  332. --star-tail-length: 7.3em;
  333. --top-offset: 36.19vh;
  334. --fall-duration: 11.297s;
  335. --fall-delay: 1.341s;
  336. }
  337. .star:nth-child(50) {
  338. --star-tail-length: 5.31em;
  339. --top-offset: 70.3vh;
  340. --fall-duration: 11.481s;
  341. --fall-delay: 6.827s;
  342. }
  343. .star::before, .star::after {
  344. position: absolute;
  345. content: &quot;&quot;;
  346. top: 0;
  347. left: calc(var(--star-width) / -2);
  348. width: var(--star-width);
  349. height: 100%;
  350. background: linear-gradient(45deg, transparent, currentColor, transparent);
  351. border-radius: inherit;
  352. animation: blink 2s linear infinite;
  353. }
  354. .star::before {
  355. transform: rotate(45deg);
  356. }
  357. .star::after {
  358. transform: rotate(-45deg);
  359. }
  360. @keyframes fall {
  361. to {
  362. transform: translate3d(-30em, 0, 0);
  363. }
  364. }
  365. @keyframes tail-fade {
  366. 0%, 50% {
  367. width: var(--star-tail-length);
  368. opacity: 1;
  369. }
  370. 70%, 80% {
  371. width: 0;
  372. opacity: 0.4;
  373. }
  374. 100% {
  375. width: 0;
  376. opacity: 0;
  377. }
  378. }
  379. @keyframes blink {
  380. 50% {
  381. opacity: 0.6;
  382. }
  383. }/*# sourceMappingURL=style.css.map */

<!-- language: lang-html -->

  1. &lt;!-- stars --&gt;
  2. &lt;div class=&quot;stars&quot;&gt;
  3. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  4. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  5. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  6. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  7. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  8. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  9. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  10. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  11. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  12. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  13. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  14. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  15. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  16. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  17. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  18. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  19. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  20. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  21. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  22. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  23. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  24. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  25. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  26. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  27. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  28. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  29. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  30. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  31. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  32. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  33. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  34. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  35. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  36. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  37. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  38. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  39. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  40. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  41. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  42. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  43. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  44. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  45. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  46. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  47. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  48. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  49. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  50. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  51. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  52. &lt;div class=&quot;star&quot;&gt;&lt;/div&gt;
  53. &lt;/div&gt;
  54. &lt;!-- head --&gt;
  55. &lt;header&gt;
  56. &lt;div&gt;
  57. &lt;a href=&quot;index.html&quot; style=&quot;position: absolute; top: 40px; left: 80px;&quot;&gt;
  58. &lt;img src=&quot;media/logoo.png&quot; alt=&quot;logo&quot; style=&quot;width: 150px; height: auto; clip: rect(0px, 100px, 50px, 0px);&quot;&gt;
  59. &lt;/a&gt;
  60. &lt;/div&gt;
  61. &lt;div&gt;
  62. &lt;p class=&quot;main&quot;&gt;&lt;a href=&quot;https://fixedfloat.com/about&quot; style=&quot;text-decoration: none;&quot;&gt;About&lt;/a&gt;&lt;/p&gt;
  63. &lt;/div&gt;
  64. &lt;/header&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月30日 06:42:20
  • 转载请务必保留本文链接：https://go.coder-hub.com/76360686.html
  • css
  • html
  • hyperlink
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定