Эффект пульсации элемента на чистом 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
Введение в условные операторы и условную логику 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, так что это интересный и не ресурсоёмкий способ.
Адаптивная верстка. Правильные медиа выражения для retina.
Мне приходилось встречать довольно много разные способы определения мониторов retina. Одни являются объемными, другие наоборот. Давайте рассмотрим, какие из media quires изпользовать для ретинизации.
Создаём отзывчивые письма без медиа-запросов
Создавая HTML код для email, приходится иметь дело с изрядным количеством больных вопросов. И вряд ли для кого то будет приемлемо, если нам к тому же ещё и придётся следить за новыми email-клиентами и размерами устройств, которые появляются каждую неделю.
Формат ссылки для телефонных звонков
На сегодняшний день большинство мобильных устройств с браузером также являются телефонами! Так почему бы не создавать для телефонных номеров на вашей странице ссылки, кликая по которым вызывалось бы встроенное приложение для звонков.
