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

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

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

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

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

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

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

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

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

Полезность статьи

Оцените, на сколько полезной оказалась статья.
1 балл2 балла3 балла4 балла5 баллов
1,50 / 5 баллов
2 участников
Комментарии

Здесь еще никто не оставлял комментарии.

Добавить комментарий

* - поля обязательные для заполнения. E-mail не публикуется.