Светофор на CSS3 без JavaScript
Пару недель назад дизайнер на работе занималась созданием макета для нового проекта сайта. Сайт посвящен учебному заведению и обладает вселенной из персонажей, каждый из которых выполняет какое-то анимированное действие. Персонажей я почему-то в этом проекте стал называть "чекистами", не знаю почему. Один из чекистов стоит возле светофора и логично здесь сделать анимацию переключения сигналов светофора. Задача несложная, и реализуется с помощью JS или анимацией CSS3. Я стараюсь сегодня реализовывать анимацию, если это требуется с помощью CSS3, а javascript остается спасательным кругом для старых браузеров.
В данном случае со светофором продемонстрирую только решение с помощью анимации CSS3.
Есть фоновая картинка светофора. На эту картинку мы накладываем три круга созданные с помощью border-radius, которые отвечают за сигналы светофора. Сетку, которую можно увидеть на сигналах светофора воссоздаём с помощью radial-gradient(lime,transparent). Объем к сигналам светофора добавляем через тень box-shadow.
Анимация всех сигналов выполняется одновременно, длиться 6 секунд и является бесконечным циклом.
.lightRed {
-webkit-animation-duration: 6s;
-webkit-animation-name: lightRed;
-webkit-animation-iteration-count: infinite;
}
.lightYellow {
-webkit-animation-duration: 6s;
-webkit-animation-name: lightYellow;
-webkit-animation-iteration-count: infinite;
}
.lightGreen {
-webkit-animation-duration: 6s;
-webkit-animation-name: lightGreen;
-webkit-animation-iteration-count: infinite;
}
Анимация воспроизводится одновременно для всех сигналов светофора, а эффект мигания и исчезновения достигается через прозрачность opacity элемента.
@-webkit-keyframes lightRed{
0%{opacity: 1;}
20%{opacity: 1;}
40%{opacity: 1;}
60%{opacity: .1;}
80%{opacity: .1;}
100%{opacity: .1;}
}
@-webkit-keyframes lightYellow{
0%{opacity: .1;}
20%{opacity: .1;}
40%{opacity: 1;}
50%{opacity: .1;}
60%{opacity: .1;}
80%{opacity: .1;}
100%{opacity: .1;}
}
@-webkit-keyframes lightGreen{
0%{opacity: .1;}
20%{opacity: .1;}
40%{opacity: .1;}
60%{opacity: 1;}
80%{opacity: 1;}
85%{opacity: .1;}
90%{opacity: 1;}
95%{opacity: .1;}
100%{opacity: 1;}
}
Работает красиво и реалистично, можно поиграться еще с прозрачностью и временем анимации и добиться большого реализма, если такое нужно. Живой пример и демо файл содержат только поддержку -webkit'овых браузеров для остальных нужно добавить вариант с -moz и без прификса.