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

меню

Вернуться назад

Задумались, как сделать пульсирующий элемент на чистом css/html. В данной статей, мы покажем самый простой пример того, как реализоваться анимацию пульсацию, используя html и css.

Html пульсации элемента

  
<!DOCTYPE html>
<html>
<head>
 <title>Простой пример CSS анимация пульсации</title>
</head>
<body>
 <div class="pulse"></div>
</body>
</html>

CSS пульсации элемента

 
.pulse {
  margin:100px;
 display: block;
 width: 22px;
  height: 22px;
 border-radius: 50%;
 background: #cca92c;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(204,169,44, 0.4);
  animation: pulse 2s infinite;
}

.pulse:hover {
  animation: none;
}

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

@keyframes pulse {
  0% {
    -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);
  }
 70% {
   -moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
    box-shadow: 0 0 0 10px rgba(204,169,44, 0);
 }
 100% {
    -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
   box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}

Это базовый CSS. Если немного поиграть, Вы можете увеличить диаметр пульсации, изменить цвет пульсации, изменить цвет элемента.

Помощь сайту

ЮMoney:

4100 1180 7209 833

Карта Сбербанк:

2202 2080 6183 7127

Просмотров: 19919

2.97
1
2
3
4
5

Голосов: 1317

Введение в условные операторы и условную логику CSS Семь крутых HTML-элементов, которые мало кто использует Про новые CSS псевдоклассы - :is() :where() :has() 10 редких тегов HTML, которые редко используют Косая граница блока или граница с наклоном Как в CSS связывать объекты? Масштабирование в CSS средствами zoom и transform Эффект пульсации элемента на чистом CSS Красивая форма обратной связи на чистом CSS Что такое Pixel Perfect верстка? Адаптивная верстка. Правильные медиа выражения для retina. Формат ссылки для телефонных звонков Icon Fonts или SVG? Скошенные элементы на CSS3 Стилизуем placeholder при помощи CSS Адаптивный CSS3 Manasory без JavaScript Что такое Flexbox? Описание всех css свойств, основные принципы, преимущества и недостатки. CSS прижать footer к низу окна браузера Создаём отзывчивые письма без медиа-запросов Кроссбраузерная стилизация select на CSS Специальные символы HTML Треугольники по средствам CSS Стилизация элементов checkbox и radio button на CSS3 Как убрать свечение вокруг текстового поля? Как отключить преобразование телефонных номеров в ссылки в мобильных браузерах 17 CSS/HTML эффектов с кроссбраузерными решениями Пять полезных CSS селекторов Медиа типы в CSS Базовые правила HTML верстки писем для E-Mail рассылки Создаём адаптивный сайт

Возможно, вам будет интересно

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

Задумались, как сделать пульсирующий элемент на чистом css/html. В данной статей, мы покажем саймый простой пример того, как реализоваться анимацию пульсацию, используя html и css.

Читать подробнее

Масштабирование в CSS средствами zoom и transform

Масштабировать элементы можно используя css свойство zoom. Cвойство CSS Zoom, поддерживается в IE 5.5+, Opera, Safari 4 и Chrome.

Читать подробнее

Что такое Pixel Perfect верстка?

Pixel Perfect верстка — это особая техника создания структуры html-кода, которая позволяет сверстанному html-шаблону максимально точно совпадать с оригинальным PSD-макетом пиксель в пиксель.

Читать подробнее

Формат ссылки для телефонных звонков

На сегодняшний день большинство мобильных устройств с браузером также являются телефонами! Так почему бы не создавать для телефонных номеров на вашей странице ссылки, кликая по которым вызывалось бы встроенное приложение для звонков.

Читать подробнее