添加style.css后，我停止了html中的链接，当我删除style.css时，所有链接再次工作。无论如何添加链接，它们都不起作用。我已经在下面附上了index.html和style.css文件，任何代码的帮助都是伟大的！index.html
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- stars -->
<div class="stars">
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
</div>
</div>
<!-- head -->
<header>
<div>
<a href="index.html" style="position: absolute; top: 40px; left: 80px;">
<img src="media/logoo.png" alt="logo" style="width: 150px; height: auto; clip: rect(0px, 100px, 50px, 0px);">
</a>
</div>
<div>
<p class="main"><a href="https://fixedfloat.com/about" style="text-decoration: none;">About</a></p>
</div>
</header>
</body>
</html>style.css
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: radial-gradient(ellipse at bottom, #0d1d31 0%, #0c0d13 100%);
overflow: hidden;
color: #5e9ce2;
}
.stars {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 120%;
transform: rotate(-45deg);
}
.star {
--star-color: var(--primary-color);
--star-tail-length: 6em;
--star-tail-height: 2px;
--star-width: calc(var(--star-tail-length) / 6);
--fall-duration: 9s;
--tail-fade-duration: var(--fall-duration);
position: absolute;
top: var(--top-offset);
left: 0;
width: var(--star-tail-length);
height: var(--star-tail-height);
color: var(--star-color);
background: linear-gradient(45deg, currentColor, transparent);
border-radius: 50%;
filter: drop-shadow(0 0 6px currentColor);
transform: translate3d(104em, 0, 0);
animation: fall var(--fall-duration) var(--fall-delay) linear infinite, tail-fade var(--tail-fade-duration) var(--fall-delay) ease-out infinite;
}
@media screen and (max-width: 750px) {
.star {
animation: fall var(--fall-duration) var(--fall-delay) linear infinite;
}
}
.star:nth-child(1) {
--star-tail-length: 7.42em;
--top-offset: 91.42vh;
--fall-duration: 10.883s;
--fall-delay: 9.243s;
}
.star:nth-child(2) {
--star-tail-length: 5.65em;
--top-offset: 35.2vh;
--fall-duration: 9.348s;
--fall-delay: 9.487s;
}
.star:nth-child(3) {
--star-tail-length: 6.5em;
--top-offset: 44.59vh;
--fall-duration: 9.189s;
--fall-delay: 4.048s;
}
.star:nth-child(4) {
--star-tail-length: 6.05em;
--top-offset: 52.39vh;
--fall-duration: 7.227s;
--fall-delay: 2.644s;
}
.star:nth-child(5) {
--star-tail-length: 5.66em;
--top-offset: 13.38vh;
--fall-duration: 6.508s;
--fall-delay: 4.468s;
}
.star:nth-child(6) {
--star-tail-length: 6.4em;
--top-offset: 16.82vh;
--fall-duration: 9.272s;
--fall-delay: 3.234s;
}
.star:nth-child(7) {
--star-tail-length: 5.21em;
--top-offset: 54.97vh;
--fall-duration: 9.353s;
--fall-delay: 5.9s;
}
.star:nth-child(8) {
--star-tail-length: 5.15em;
--top-offset: 78.08vh;
--fall-duration: 11.137s;
--fall-delay: 7.126s;
}
.star:nth-child(9) {
--star-tail-length: 7em;
--top-offset: 73.39vh;
--fall-duration: 8.93s;
--fall-delay: 6.951s;
}
.star:nth-child(10) {
--star-tail-length: 7.48em;
--top-offset: 98.16vh;
--fall-duration: 10.745s;
--fall-delay: 2.463s;
}
.star:nth-child(11) {
--star-tail-length: 6.31em;
--top-offset: 47.97vh;
--fall-duration: 11.58s;
--fall-delay: 1.812s;
}
.star:nth-child(12) {
--star-tail-length: 6.2em;
--top-offset: 3.8vh;
--fall-duration: 10.272s;
--fall-delay: 1.493s;
}
.star:nth-child(13) {
--star-tail-length: 5.44em;
--top-offset: 66.21vh;
--fall-duration: 8.307s;
--fall-delay: 8.897s;
}
.star:nth-child(14) {
--star-tail-length: 5.61em;
--top-offset: 57.55vh;
--fall-duration: 7.163s;
--fall-delay: 7.239s;
}
.star:nth-child(15) {
--star-tail-length: 6.35em;
--top-offset: 80.38vh;
--fall-duration: 9.348s;
--fall-delay: 2.744s;
}
.star:nth-child(16) {
--star-tail-length: 5.99em;
--top-offset: 52.43vh;
--fall-duration: 10.049s;
--fall-delay: 6.638s;
}
.star:nth-child(17) {
--star-tail-length: 5.63em;
--top-offset: 16.33vh;
--fall-duration: 9.944s;
--fall-delay: 4.792s;
}
.star:nth-child(18) {
--star-tail-length: 5.21em;
--top-offset: 36.16vh;
--fall-duration: 8.625s;
--fall-delay: 0.086s;
}
.star:nth-child(19) {
--star-tail-length: 7em;
--top-offset: 86.83vh;
--fall-duration: 7.006s;
--fall-delay: 7.969s;
}
.star:nth-child(20) {
--star-tail-length: 7.49em;
--top-offset: 71vh;
--fall-duration: 10.418s;
--fall-delay: 5.522s;
}
.star:nth-child(21) {
--star-tail-length: 6.39em;
--top-offset: 57.2vh;
--fall-duration: 10.747s;
--fall-delay: 6.503s;
}
.star:nth-child(22) {
--star-tail-length: 5.06em;
--top-offset: 3.87vh;
--fall-duration: 9.784s;
--fall-delay: 1.126s;
}
.star:nth-child(23) {
--star-tail-length: 7.49em;
--top-offset: 61.12vh;
--fall-duration: 9.994s;
--fall-delay: 6.287s;
}
.star:nth-child(24) {
--star-tail-length: 5.1em;
--top-offset: 73.65vh;
--fall-duration: 11.455s;
--fall-delay: 6.274s;
}
.star:nth-child(25) {
--star-tail-length: 7.14em;
--top-offset: 52.58vh;
--fall-duration: 7.936s;
--fall-delay: 4.428s;
}
.star:nth-child(26) {
--star-tail-length: 6.79em;
--top-offset: 0.02vh;
--fall-duration: 11.395s;
--fall-delay: 3.252s;
}
.star:nth-child(27) {
--star-tail-length: 5.76em;
--top-offset: 79.27vh;
--fall-duration: 9.931s;
--fall-delay: 6.989s;
}
.star:nth-child(28) {
--star-tail-length: 5.03em;
--top-offset: 20.34vh;
--fall-duration: 10.47s;
--fall-delay: 3.472s;
}
.star:nth-child(29) {
--star-tail-length: 6.7em;
--top-offset: 41.33vh;
--fall-duration: 11.859s;
--fall-delay: 5.425s;
}
.star:nth-child(30) {
--star-tail-length: 6.31em;
--top-offset: 5.13vh;
--fall-duration: 8.906s;
--fall-delay: 6.664s;
}
.star:nth-child(31) {
--star-tail-length: 5.72em;
--top-offset: 56.37vh;
--fall-duration: 6.21s;
--fall-delay: 2.698s;
}
.star:nth-child(32) {
--star-tail-length: 6.42em;
--top-offset: 44.21vh;
--fall-duration: 8.828s;
--fall-delay: 0.776s;
}
.star:nth-child(33) {
--star-tail-length: 6.63em;
--top-offset: 78.63vh;
--fall-duration: 9.743s;
--fall-delay: 0.937s;
}
.star:nth-child(34) {
--star-tail-length: 5.22em;
--top-offset: 69.82vh;
--fall-duration: 7.973s;
--fall-delay: 4.881s;
}
.star:nth-child(35) {
--star-tail-length: 6.72em;
--top-offset: 26.81vh;
--fall-duration: 6.534s;
--fall-delay: 9.414s;
}
.star:nth-child(36) {
--star-tail-length: 6.84em;
--top-offset: 1.07vh;
--fall-duration: 7.474s;
--fall-delay: 8.621s;
}
.star:nth-child(37) {
--star-tail-length: 5.52em;
--top-offset: 61.71vh;
--fall-duration: 8.469s;
--fall-delay: 7.25s;
}
.star:nth-child(38) {
--star-tail-length: 6.83em;
--top-offset: 83.01vh;
--fall-duration: 7.611s;
--fall-delay: 6.944s;
}
.star:nth-child(39) {
--star-tail-length: 7.47em;
--top-offset: 36.06vh;
--fall-duration: 8.648s;
--fall-delay: 0.575s;
}
.star:nth-child(40) {
--star-tail-length: 5.18em;
--top-offset: 26.24vh;
--fall-duration: 10.058s;
--fall-delay: 9.153s;
}
.star:nth-child(41) {
--star-tail-length: 6.47em;
--top-offset: 21.26vh;
--fall-duration: 10.039s;
--fall-delay: 2.669s;
}
.star:nth-child(42) {
--star-tail-length: 5.48em;
--top-offset: 6.51vh;
--fall-duration: 6.084s;
--fall-delay: 0.54s;
}
.star:nth-child(43) {
--star-tail-length: 7.18em;
--top-offset: 23.12vh;
--fall-duration: 10.773s;
--fall-delay: 4.242s;
}
.star:nth-child(44) {
--star-tail-length: 6.56em;
--top-offset: 64.95vh;
--fall-duration: 9.882s;
--fall-delay: 0.671s;
}
.star:nth-child(45) {
--star-tail-length: 7.49em;
--top-offset: 62.5vh;
--fall-duration: 6.65s;
--fall-delay: 7.761s;
}
.star:nth-child(46) {
--star-tail-length: 5.12em;
--top-offset: 46.39vh;
--fall-duration: 7.437s;
--fall-delay: 6.915s;
}
.star:nth-child(47) {
--star-tail-length: 6.97em;
--top-offset: 60.45vh;
--fall-duration: 8.868s;
--fall-delay: 9.445s;
}
.star:nth-child(48) {
--star-tail-length: 6.19em;
--top-offset: 21.42vh;
--fall-duration: 11.275s;
--fall-delay: 2.53s;
}
.star:nth-child(49) {
--star-tail-length: 7.3em;
--top-offset: 36.19vh;
--fall-duration: 11.297s;
--fall-delay: 1.341s;
}
.star:nth-child(50) {
--star-tail-length: 5.31em;
--top-offset: 70.3vh;
--fall-duration: 11.481s;
--fall-delay: 6.827s;
}
.star::before, .star::after {
position: absolute;
content: "";
top: 0;
left: calc(var(--star-width) / -2);
width: var(--star-width);
height: 100%;
background: linear-gradient(45deg, transparent, currentColor, transparent);
border-radius: inherit;
animation: blink 2s linear infinite;
}
.star::before {
transform: rotate(45deg);
}
.star::after {
transform: rotate(-45deg);
}
@keyframes fall {
to {
transform: translate3d(-30em, 0, 0);
}
}
@keyframes tail-fade {
0%, 50% {
width: var(--star-tail-length);
opacity: 1;
}
70%, 80% {
width: 0;
opacity: 0.4;
}
100% {
width: 0;
opacity: 0;
}
}
@keyframes blink {
50% {
opacity: 0.6;
}
}/*# sourceMappingURL=style.css.map */由于某些原因，链接不可点击
1条答案
按热度按时间pgky5nke1#
删除stars div 后面额外的关闭
</div>，并在 stars 类中添加z-index将解决此问题。