Как создать CSS-анимацию, похожую на Shockwave

Я работаю над созданием анимации CSS с эффектом ударной волны, как показано в этом дизайне:

Мои текущие попытки создать ударную волну, но проблема в том, что внутренняя часть круга заполнена и не имеет желаемого эффекта удара. Это то, что у меня сейчас есть:

Как создать CSS-анимацию, похожую на Shockwave

Вот мой код:

  svg {
    border-radius: 50%;
    animation: pulse-bomb 4s 0s ease-out infinite;
  }

  @keyframes pulse-bomb {
    0% {
      box-shadow: 0 0 8px 6px rgba(233,233,246, 0), 0 0 0px 0px rgba(233,233,246, 0.2), 0 0 0px 0px rgba(233,233,246, 0);
      transform: scale(1);
    }
    10% {
      box-shadow: 0 0 8px 6px rgba(233,233,246, .8), 0 0 12px 10px rgba(233,233,246, 0.2), 0 0 12px 14px rgba(233,233,246, 0);
      transform: scale(1.08);
    }
    60% {
      box-shadow: 0 0 8px 6px rgba(233,233,246, 0), 0 0 0px 100px rgba(233,233,246, 0.0), 0 0 0px 100px rgba(233,233,246, 0);
      transform: scale(0.96);
    }
    80% {
      box-shadow: 0 0 8px 6px rgba(233,233,246, 0), 0 0 0px 0 rgba(233,233,246, 0), 0 0 0px 0 rgba(233,233,246, 0);
      transform: scale(1);
    }
  }

Любые идеи о том, как я могу обновить свою анимацию, чтобы не заполнять весь круг ударной волны?

новичок в анимации css, но есть много примеров, таких как этот пульс, это то, чего вы хотите достичь?

— 18.01.2019 01:47

Можете ли вы опубликовать свой html тоже?

— 18.01.2019 10:17

html css css-animations

18.01.2019 01:43

Улучшение производительности загрузки с помощью 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 732

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я бы использовал несколько radial-gradient и анимировал размер фона каждого из них, чтобы получить необходимый эффект.

body {
  margin: 0;
  background: lightblue;
}

.box {
  width: 250px;
  height: 250px;
  margin: 20px auto;
  background:
    radial-gradient(
      transparent 21%, rgba(233,233,246, .8) 21%,
      rgba(233,233,246, .8) 22%,transparent 28%),
    radial-gradient(
      transparent 36%,rgba(233,233,246, .8) 40%,
      rgba(233,233,246, .8) 42%,transparent 50%),
    radial-gradient(
      transparent 60%,rgba(233,233,246, .8) 65%,
      rgba(233,233,246, .8) 66%,transparent 70%);
  background-size:0 0,0 0,0 0;
  background-position:center;
  background-repeat:no-repeat;
  animation:change 5s linear infinite;
}
@keyframes change{
  0% {
    background-size:0 0,0 0,0 0;
  }
  25% {
    background-size:0 0,0 0,30% 30%;
  }
  50% {
    background-size:10% 10%,40% 40%,60% 60%;
  }
  75% {
    background-size:100% 100%,100% 100%,100% 100%;
  }
  100% {
    background-size:100% 100%,100% 100%,100% 100%;
  }
}