我正在尝试创建类似 this CodePen 的东西.
您会注意到所有星星的行进距离都相同。我将如何使某些恒星行进不同的距离？我需要单独上课吗？
旁注:谁能解释一下他们是如何让一颗星星在圆圈外生成而不显示直到它进入圆圈的？
* {
box-sizing: border-box;
}
body {
background: #eee;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
body,
html {
height: 100vh;
margin: 0;
}
.sky-container {
width: 500px;
height: 500px;
background: linear-gradient(125deg, #00103a 0%, #3e5f77 100%);
clip-path: circle(50% at 50% 50%);
border-radius: 50%;
transform: rotateZ(45deg);
}
.border {
width: 500px;
height: 500px;
position: absolute;
border: 5px solid #fff;
border-radius: 50%;
box-shadow: 0 0 3px 2px #d6d6d6;
z-index: 100;
}
.star {
position: absolute;
top: 50%;
left: 50%;
height: 2px;
background: linear-gradient(-45deg, #5f91ff, rgba(0, 0, 255, 0));
filter: drop-shadow(0 0 6px #699bff);
animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
}
.star::before,
.star::after {
position: absolute;
content: '';
top: calc(50% - 1px);
right: 0;
height: 2px;
background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0));
border-radius: 100%;
transform: translateX(50%) rotateZ(45deg);
animation: shining 3000ms ease-in-out infinite;
}
.star::after {
transform: translateX(50%) rotateZ(-45deg);
}
.star:nth-child(1) {
top: calc(50% - 200px);
left: calc(50% - 300px);
animation-delay: 650ms;
}
.star:nth-child(1)::before,
.star:nth-child(1)::after {
animation-delay: 650ms;
}
.star:nth-child(2) {
top: calc(50% - -50px);
left: calc(50% - 190px);
animation-delay: 150ms;
}
.star:nth-child(2)::before,
.star:nth-child(2)::after {
animation-delay: 150ms;
}
.star:nth-child(3) {
top: calc(50% - -90px);
left: calc(50% - 200px);
animation-delay: 1600ms;
}
.star:nth-child(3)::before,
.star:nth-child(3)::after {
animation-delay: 1600ms;
}
.star:nth-child(4) {
top: calc(50% - 50px);
left: calc(50% - 250px);
animation-delay: 4700ms;
}
.star:nth-child(4)::before,
.star:nth-child(4)::after {
animation-delay: 4700ms;
}
.star:nth-child(5) {
top: calc(50% - -190px);
left: calc(50% - 200px);
animation-delay: 2100ms;
}
.star:nth-child(5)::before,
.star:nth-child(5)::after {
animation-delay: 2100ms;
}
/* Animations */
@keyframes tail {
0% {
width: 0;
}
30% {
width: 100px;
}
100% {
width: 0;
}
}
@keyframes shining {
0% {
width: 0;
}
50% {
width: 30px;
}
100% {
width: 0;
}
}
@keyframes shooting {
0% {
transform: translateX(0);
}
100% {
transform: translateX(320px);
}
}<html>
<body>
<div class="sky-container">
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
</div>
<div class="border"></div>
</body>
<html>最佳答案
您可以使用单独的类来实现，或者更改每个星星的 top 和 left 值
.star:nth-child(1) {
top: calc(50% - 200px);
left: calc(50% - 300px);
animation-delay: 650ms;
}
对于第一颗星，如果您更改 lef(ex: left: calc(50% - 200px)) 或 top 的值，第一颗星将移动到不同的距离。
注意:要了解更多信息，请了解 css 的 before、after、transform、translate。
关于html - 如何只修改类的一个特定实例？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56984124/