Эффект пульсации для сайта на чистом CSS

Приветствую, друзья, сегодня делаем эффект пульсации для сайта на чистом CSS. Мы не будем использовать JavaScript или jQuery. Именно поэтому данную анимацию пульсации может сделать даже новичок без особо большого опыта. Данный эффект сможет разнообразить ваш сайт, при этом он не потребляет много ресурсов.

Напоминаю, что вы можете взять код как с сайта, так и посмотреть его на Codepen. Там же вы можете поиграться с кодом, попробовать его изменить под себя.

Делаем эффект пульсации

Начнем, как всегда, с HTML. Тут разметка максимально простая. В дополнение к ней — вы так же можете обернуть картинку (или другой контент в ссылку <a>. Так же вы можете заменить картинку на текст, иди другой контент. Для примера, я поместил картинку своего канала.

<div class="pulse">
    <img src="https://yt3.ggpht.com/-RO20tr8ZmBg/AAAAAAAAAAI/AAAAAAAAAAA/BhQeGSkCSdQ/s108-c-k-c0x00ffffff-no-rj-mo/photo.jpg" alt="">
</div>

После этого переходим в CSS, где мы и будем делать основную часть работы. Для начала стилизуем саму картинку, пока без анимации. Ниже код с комментариями, что именно и для чего я делал.

.pulse {
  position: relative; // Нужно будет в будущем, для позиционирования эффекта
  text-align: center; 
  padding: 20px; // Отступ можете подобрать свой.
  border-radius: 50%; // Делаем икноку круглой
  background: #3D64FF;
  width: 80px;
  height: 80px;
}

После этого зададим свойства для псевдокласса ::before. Именно его мы и будем анимировать. Мы сделаем его так же круглым, без фона, но с обводкой. Так же делаем его прозрачным. При анимации мы просто будем убирать его прозрачность и увеличивать его.

.pulse::before {
  content: ''; // Нужно для отображения псевдокласса
  position: absolute;
  border: 2px solid #3D64FF; // Ширину обводки можете выбрать сами
  left: -20px;
  opacity: 0;
  right: -20px;
  top: -20px;
  bottom: -20px;
  border-radius: 50%;
  animation: pulse 2.5s linear infinite; // Указываем название анимации, время, тип, и нужно ли её повторять
}

После чего прописываем саму анимацию.

@keyframes pulse {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

Усиливаем эффект, финальный код

На этом все готово, однако я хочу еще добавить анимацию для псевдокласса ::after, что бы усилить эффект. Для этого нужно прописать для него все те же стили, что и для ::before + добавить задержку перед анимацией. Вот финальный код:

.pulse::after,
.pulse::before {
  content: '';
  position: absolute;
  border: 2px solid #3D64FF;
  left: -20px;
  opacity: 0;
  right: -20px;
  top: -20px;
  bottom: -20px;
  border-radius: 50%;
  animation: pulse 2.5s linear infinite;
}

.pulse::after {
  animation-delay: 1.25s;
}

@keyframes pulse {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

Результат

Спасибо, что прочитали! Если у вас остались вопросы, возникли проблемы или вы заметили ошибку — пишите в комментариях под этой статьей, постараюсь помочь всем)

Так же предлагаю ознакомиться с другими моими уроками:

1. Анимация при скролле в несколько строк кода
2.Параллакс эффект для фона сайта на чистом CSS