3

В текущей анимации есть рывки синих кругов. Подскажите пожалуйста, как можно это исправить, а так же сделать так, чтобы на синих кругах не было видно красных кругов, z-index почему-то не срабатывает

body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.items {
  width: 400px;
  height: 400px;
  position: relative;
  overflow: hidden;
}

.item {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid red;
  border-radius: 50%;
}

.item:nth-child(1) {
  --size: 350px;
  --degress: 30deg;
  width: var(--size);
  height: var(--size);
  transform: translate(-50%, -50%) rotate(var(--degress));
  animation: an1 30s linear infinite;
}

.item:nth-child(2) {
  --size: 300px;
  --degress: 45deg;
  width: var(--size);
  height: var(--size);
  transform: translate(-50%, -50%) rotate(var(--degress));
  animation: an2 40s linear infinite;
}

.item:nth-child(3) {
  --size: 250px;
  --degress: 60deg;
  width: var(--size);
  height: var(--size);
  transform: translate(-50%, -50%) rotate(var(--degress));
  animation: an3 20s linear infinite;
}

.item:nth-child(4) {
  --size: 200px;
  --degress: 75deg;
  width: var(--size);
  height: var(--size);
  transform: translate(-50%, -50%) rotate(var(--degress));
  animation: an4 50s linear infinite;
}

.circle {
  width: 100px;
  height: 100px;
  background: blue;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: -10px;
}

@keyframes an1 {
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes an2 {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes an3 {
  from {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes an4 {
  from {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
<div class="items">
  <div class="item">
    <div class="circle"></div>
  </div>
  <div class="item">
    <div class="circle"></div>
  </div>
  <div class="item">
    <div class="circle"></div>
  </div>
  <div class="item">
    <div class="circle"></div>
  </div>
</div>

1 ответ 1

4

Рывки возникают из-за угла rotate в анимации - у Вас он не учитывает изначальной трансформации объектов.

Что касается второй проблемы, то, возможно, коллеги меня поправят, но здесь срабатывает т.н. "контекст наложения": поскольку у Вас каждый circle находится внутри своего item, то у них изолированный контекст наложения. Соответственно circle может перекрыть только свой item - другие находятся вне его контекста.

body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.items {
  width: 400px;
  height: 400px;
  position: relative;
  overflow: hidden;
}

.item {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid red;
  border-radius: 50%;
}

.item:nth-child(1) {
  --size: 350px;
  --degress: 30deg;
  width: var(--size);
  height: var(--size);
  transform: translate(-50%, -50%) rotate(var(--degress));
  animation: an1 30s linear infinite;
}

.item:nth-child(2) {
  --size: 300px;
  --degress: 45deg;
  width: var(--size);
  height: var(--size);
  transform: translate(-50%, -50%) rotate(var(--degress));
  animation: an2 40s linear infinite;
}

.item:nth-child(3) {
  --size: 250px;
  --degress: 60deg;
  width: var(--size);
  height: var(--size);
  transform: translate(-50%, -50%) rotate(var(--degress));
  animation: an3 20s linear infinite;
}

.item:nth-child(4) {
  --size: 200px;
  --degress: 75deg;
  width: var(--size);
  height: var(--size);
  transform: translate(-50%, -50%) rotate(var(--degress));
  animation: an4 50s linear infinite;
}

.circle {
  width: 100px;
  height: 100px;
  background: blue;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: -10px;
}

@keyframes an1 {
  to {
    transform: translate(-50%, -50%) rotate(-330deg);
  }
}
@keyframes an2 {
  to {
    transform: translate(-50%, -50%) rotate(405deg);
  }
}
@keyframes an3 {
  from {
    transform: translate(-50%, -50%) rotate(-300deg);
  }
}
@keyframes an4 {
  from {
    transform: translate(-50%, -50%) rotate(435deg);
  }
}
<div class="items">
  <div class="item">
    <div class="circle"></div>
  </div>
  <div class="item">
    <div class="circle"></div>
  </div>
  <div class="item">
    <div class="circle"></div>
  </div>
  <div class="item">
    <div class="circle"></div>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.