主页 / 问题 / 1320564
Accepted
kiskiskit
Asked:2022-08-23 16:10:34 +0000 UTC2022-08-23 16:10:34 +0000 UTC

如何在不抽搐的情况下制作css动画？

  • 772

当前动画中有蓝色圆圈抽搐。请告诉我如何解决此问题，并使其在蓝色圆圈上不可见红色圆圈，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>

html

1 个回答

  1. Best Answer

    由于动画中的角度而发生抽搐rotate- 在您的情况下，它没有考虑对象的初始变换。

    至于第二个问题，也许我的同事会纠正我，但这里所谓的。“重叠上下文”：由于您每个都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>

    • 4

相关问题