Как сделать переворот кольца/обруча при прохождении через него мяча?

Я пытаюсь сделать что-то вроде этого:

но мяч, кажется, не проходит через кольцо, а скорее проходит через кольцо. Как я могу решить эту проблему?

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>

html css css-animations css-transforms

04.03.2019 09:38

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

1 142

Ответы 3

Вы можете попробовать изменить z-индекс мяча внутри анимации.

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>

04.03.2019 09:48

Я бы создал кольцо, используя два элемента (нижнюю и верхнюю часть), чтобы иметь возможность по-разному настраивать z-индекс каждого из них:

.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>

04.03.2019 09:53

Вы можете использовать 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>

04.03.2019 21:36

Другие вопросы по теме

Проблема с полями CSS — Wordpress

Передача реквизита стилизованному компоненту

Как исправить продукт с сеткой строк с фиксированным размером?

Как мне сделать это представление с загрузочной сеткой? или я должен использовать группу списка?

Почему этот код не помогает мне получить пустую доску для игры в крестики-нолики?

Равномерно выровняйте индикатор выполнения по кругу

Настройте HTML-таблицу с содержимым, которое хотите отобразить, Angular

ПопИн из центра

Правильное форматирование нескольких элементов HTML/CSS

Bootstrap 4, удалите пустое пространство рядом с темным столбцом с правой стороны

Как сделать переворот кольца/обруча при прохождении через него мяча?

Ответы 3

Другие вопросы по теме

Похожие вопросы