Оценка пользователей
( vote)Сегодня мы будем создавать кнопку с меняющимся цветом при помощи CSS анимации.
В первую очередь создадим анимацию:
@-webkit-keyframes greenPulse { from { background-color: #749a02; -webkit-box-shadow: 0 0 9px #333; } 50% { background-color: #91bd09; -webkit-box-shadow: 0 0 18px #91bd09; } to { background-color: #749a02; -webkit-box-shadow: 0 0 9px #333; } }
Затем применим ее к нашей кнопке:
a.green.button { -webkit-animation-name: greenPulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; }
Вот что у нас должно получиться