Question

我正在尝试创建类似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>

Answer 1

您可以使用单独的类来执行此操作，也可以更改每个星星的top和left值

.star:nth-child(1) {
  top: calc(50% - 200px);
  left: calc(50% - 300px);
  animation-delay: 650ms;
}

对于第一颗恒星，如果更改lef（ex：left: calc(50% - 200px)）或top的值，则第一颗恒星将移动不同的距离。

NB：要了解更多信息，请先了解CSS的转换，转换，翻译。

如何只修改类的一个特定实例？

1 个答案: