Как создать эффект импульса внутрь в CSS?

В приведенном ниже коде есть анимация CSS Pulse. Эффект направлен к внешней стороне логотипа. Как добиться того же эффекта в интерьере логотипа?

If possible can you show me how to do both effects :
  • от края логотипа внутрь.
  • от внутренней части логотипа к краю.

https://codepen.io/olam/pen/zcqea


animation html css pulse box-shadow
person tropcool    schedule 28.05.2019    source источник
comment
под логотипом вы имеете в виду круг?   -  person zgood    schedule 28.05.2019

Ответы (1)


arrow_upward
0
arrow_downward

Вы буквально переворачиваете эффект. Поехали:

@keyframes pulse {
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
    box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
  }
  30% {
      -moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
      box-shadow: 0 0 0 10px rgba(204,169,44, 0);
  }
  0% {
      -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
      box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}

Я просто переключил 100% и 0% и изменил 70% на 30%. Попробуйте сами. Надеюсь это поможет

person ayang726    schedule 28.05.2019
comment
есть ключевое слово reverse, которое делает это без необходимости изменения анимации - person Temani Afif; 28.05.2019