Question

我正在尝试做这样的事情：

animation of a ball passing through a hoop

但是球似乎并没有通过环，而是越过了环。我该如何解决这个问题？

body {
  height: 50em;
}

.ring {
  position: relative;
  width: 200px;
  height: 100px;
  border-radius: 50%;
  border: 10px solid #ffcf82;
  z-index: 9
}

@keyframes spinner {
  0% {
    transform: rotateZ(0deg);
  }
  30% {
    transform: rotateZ(0deg);
  }
  60% {
    transform: rotateZ(180deg);
  }
}

@keyframes translate {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-370px);
  }
}

.ring {
  animation-name: spinner;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  transform-style: preserve-3d;
}

.ball {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #14e78e;
  margin: 100px;
}

.ball {
  animation-name: translate;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 8s;
  transform-style: preserve-3d;
}

<div class="ring"></div>
<div class="ball"></div>

Answer 1

您可以尝试在动画中更改球的z-index

body {
  height: 50em;
}

.ring {
  position: relative;
  width: 200px;
  height: 100px;
  border-radius: 50%;
  border: 10px solid #ffcf82;
  z-index: 9
}

@keyframes spinner {
  0% {
    transform: rotateZ(0deg);
  }
  30% {
    transform: rotateZ(0deg);
  }
  60% {
    transform: rotateZ(180deg);
  }
}

@keyframes translate {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-370px);
    z-index: 10;
  }
}

.ring {
  animation-name: spinner;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  transform-style: preserve-3d;
}

.ball {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #14e78e;
  margin: 100px;
  position: relative;
}

.ball {
  animation-name: translate;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 8s;
  transform-style: preserve-3d;
}

<div class="ring"></div>
<div class="ball"></div>

Answer 2

我将使用两个元素（底部和顶部）创建环，以便能够不同地调整每个环的z-index：

.ring {
  margin-top:80px;
  position: relative;
  width: 200px;
  height: 100px;
}
.ring:before,
.ring:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:100%;
  border: 10px solid #ffcf82;
  border-radius:50%;
  box-sizing:border-box;
}
.ring:before {
   z-index:-1;
   clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}
.ring:after {
   z-index:1;
   clip-path: polygon(0 100%, 100% 100%, 100% 50%, 0 50%);
}

@keyframes spinner {
  0%,50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-180deg);
  }
}

@keyframes translate {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-300px);
  }
}

.ring:before,
.ring:after{
  animation: spinner infinite alternate 4s;
}

.ball {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #14e78e;
  margin: 60px 80px;
  position:relative;
  z-index:0;
  animation: translate 8s infinite linear;
}

<div class="ring"></div>
<div class="ball"></div>

如果您需要比clip-path更好的支持，则是另一个想法。诀窍是使用透明颜色：

.ring {
  margin-top:80px;
  position: relative;
  width: 200px;
  height: 100px;
}
.ring:before,
.ring:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:100%;
  border: 10px solid #ffcf82;
  border-radius:50%;
  box-sizing:border-box;
}
.ring:before {
   z-index:-1;
}
.ring:after {
   z-index:1;
   border-bottom-color:transparent;
   border-right-color:transparent;
}

@keyframes spinner {
  0%,50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-180deg);
  }
}

@keyframes translate {
  0% {
    transform: translateY(10px);
  }
  50% {
    transform: translateY(-310px);
  }
}

.ring:before,
.ring:after{
  animation: spinner infinite alternate 4s;
}

.ball {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #14e78e;
  margin: 60px 80px;
  position:relative;
  z-index:0;
  animation: translate 8s infinite linear;
}

<div class="ring"></div>
<div class="ball"></div>

Answer 3

您可以使用3d变换来自动获得此效果。

在X轴上旋转圆。然后，它的一部分在飞机的后面，而另一部分在飞机的前面。球仍然在0 z平面上，因此它自然看起来会穿过圆：

body {
  height: 50em;
  transform-style: preserve-3d;
}

.ring {
  position: relative;
  width: 200px;
  height: 100px;
  border-radius: 50%;
  border: 10px solid #ffcf82;
  z-index: 9;
  margin-top: 100px;
      transform: rotateX(50deg) rotateY(0deg) ;
  transform-style: preserve-3d;
}

@keyframes spinner {
  0%, 30% {
    transform: rotateX(50deg) rotateY(0deg);
  }
  60%, 100% {
    transform: rotateX(50deg) rotateY(180deg);
  }
}

@keyframes translate {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-370px);
  }
}

.ring {
  animation-name: spinner;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  transform-style: preserve-3d;
}

.ball {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #14e78e;
  margin: 100px;
}

.ball {
  animation-name: translate;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 8s;
  transform-style: preserve-3d;
}

<div class="ring"></div>
<div class="ball"></div>

当球经过时如何使戒指/篮筐翻转？

3 个答案: