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

Эффект пульсации элемента на чистом 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. Если немного поиграть, Вы можете увеличить диаметр пульсации, изменить цвет пульсации, изменить цвет элемента.


Похожие материалы

В браузерах Safari и Chrome вокруг текстового поля при получении фокуса наблюдается характерное свечение, которое указывает активное поле.

В данной статье мы расскажем Вам, как разработать красивую контактную форму на чистом CSS без использования изображений. Форма будет иметь поля со следующими данными: имя, адрес электронной почты, URL-адрес, тема и текст сообщения.

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

наверх