Мигающая кнопка на чистом CSS

Как привлечь внимание посетителя к какому-либо элементу/блоку/ссылке/рекламе на своем сайте? Как обычно - заставить ее мигать или дергаться, в общем как-то анимировать. Но как быть, если не хочется перегружать свой сайт излишними скриптами и анимированными картинками (гифками)? Тогда на помощь приходит CSS.

В данной статье предлагаю разобрать самый наипростейший вариант мигающей кнопки с помощью средств CSS.

Как это работает:

Для примера у нас есть сайт ресторана, и на нем размещена кнопка "Заказать стол".

<a href="#" id="stolik"><span><img src="/images/stolik.png" /></span>Заказать стол</a>

Это простейшая ссылка, с картинкой внутри. Картинка имеет прозрачный фон и обернута в span, т.к. саму картинку мы не сможем заставить мигать, а вот span не составит труда.

Пришло время добавить некоторые стили оформления и анимации:

@-webkit-keyframes rainbow {
	0% {background: #a6ce20;}
	50% {background: #000}
	100% {background: #a6ce20;}
}

@keyframes rainbow {
	0% {background: #a6ce20;}
	50% {background: #000}
	100% {background: #a6ce20;}
} 

#stolik {
	background: #a6ce20;
	line-height: 70px;
	display: block;
	height: 70px;
	width: 400px;
	padding-right: 25px;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 32px;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
	margin: 0px auto;
	webkit-animation: rainbow 2s linear 2s infinite;
	animation: rainbow 2s linear 2s infinite;
}

@-webkit-keyframes rainbow1 {
	0% {background: #000;}
	50% {background: #a6ce20}
	100% {background: #000;} 
} 

@keyframes rainbow1 {
	0% {background: #000;}
	50% {background: #a6ce20}
	100% {background: #000;} 
} 

#stolik span {
	background: #000;
	display: block;
	float: left;
	margin-right: 25px;
	text-align: center;
	height: 70px;
	width: 70px;
	webkit-animation: rainbow1 2s linear 2s infinite;
	animation: rainbow1 2s linear 2s infinite;
}

#stolik img {
	vertical-align: middle;
	margin-top: 8px;
}

Здесь необходимо обратить внимание на свойство animation у элементов #stolik и span, в которых мы вызываем правило @keyframes (для каждого свой, соответственно). В правилах @keyframes мы указываем ключевые кадры смены цвета элементов, в то время как animation запускает эти кадры.

В итоге у нас получается простейшая анимация мигания кнопки, которую можно просмотреть перейдя по ссылке ниже.

Демо


Оставьте свой комментарий

Оставить комментарий от имени гостя

0 / 2500 Ограничение символов
Ваш текст должен быть в пределах 10-2500 символов
1 Комментарии | Добавить свои