Эффект пульсации элемента на чистом 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. Если немного поиграть, Вы можете увеличить диаметр пульсации, изменить цвет пульсации, изменить цвет элемента.
Похожие материалы
Реализация адаптивных html-блоков с содержанием в виде кирпичной кладки Masonry, исключительно средствами CSS3 без JavaScript.
В настоящее время весь интернет гудит о адаптивном веб-дизайне, потому что все хотят, чтобы их сайт хорошо отображался на различных устройствах. В этом уроке мы научимся создавать очень простой шаблон «универсального» сайта.
Всегда необычно видеть угловатые элементы в веб-дизайне. Сегодня мы посмотрим, как с помощью только CSS3 можно сделать такие угловатые, скошенные элементы.
