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

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

Когда вы хотите добиться какого-либо эффекта, то не беретесь каждый раз изобретать велосипед, всегда проще взять готовый кусок кода. И если у вас уже есть такой фрагмент кода, который реализует нужный вам функционал (и при этом вы понимаете, как он работает), то вы просто применяете его.

Браузер для BlackBerry, Android и Safari для IOS (iPhone / IPod / IPad) автоматически обнаруживает телефонные номера и адреса электронной почты на веб страницах и преобразует их в ссылки. Если вам это не надо, используйте следующие мета-теги. Для Safari (iPhone…Подробнее »

Графические иконки - главный элемент буквально всякого сайта или приложения. Как правило, весят они немного, однако вопрос выбора формата все равно остается актуальным. В случае если не брать в расчет нормальные форматы изображений, у разработчиков есть два основных варианта: использовать SVG либо иконочные шрифты (icon fonts). Собственно что из них лучше? Разберемся ниже.

наверх