Горизонтальное Lavalamp меню на CSS3
Мне, как и многим очень нравится LavaLamp эффект в навигации, раньше такой эффект можно было реализовать только на javascript.
И вот теперь это стало возможным с применением только CSS. Для достижения эффекта используется CSS3 хак -webkit-animation и правило @-webkit-keyframes
Свойство -webkit-animation — сокращенный способ задать свойства анимации -webkit-animation-name, -webkit-animation-duration, -webkit-animation-timing-function, -webkit-animation-delay, -webkit-animation-iteration-count, -webkit-animation-direction, позволяет одновременно задать имя анимации, время анимации, способ определения промежуточных значений изменяющихся параметров, задержку анимации, количество циклов анимации и возможность ее проигрывания в обратную сторону.
Правило @-webkit-keyframes — позволяет пользователю описать анимацию CSS свойств в виде перечня ключевых кадров.
Данный хак поддерживается только браузерами на движке WebKit - это Safari 4.0 и выше, Chrome 3.0 и выше, меню корректно работает только в этих браузерах!!!(хотя Опера тоже что-то там пытается изобразить)
Жаль что эффект работает не во всех браузерах, но очень радует что это всё-таки возможно и мы хотя бы можем заценить новые возможности CSS3.
Посмотреть пример горизонтальное Lavalamp меню на CSS3
Скачать готовый пример горизонтальное Lavalamp меню на CSS3
Понравилась новость Горизонтальное Lavalamp меню на CSS3 на MegaWeb.su? Сохрани в закладках или распечатай!
Информация
Если копируете мой материал - будьте добры оставлять ссылку на источник MegaWeb.su пожалуйста, или поставьте на свой сайт мою кнопочку.
Уважайте чужой труд! И Вам хорошо - и мне приятно, это стимулирует дальнейшее развитие проекта!
Другие новости по теме
Обратите внимание, возможно Вас заинтересуют другие публикации, похожие на Горизонтальное Lavalamp меню на CSS3 из категории Меню навигации
- Меню навигации ⋙ CSS3 горизонтальное выпадающее меню в стиле web 2.0
- Меню навигации ⋙ CSS3 увеличение картинки при наведении
- Меню навигации ⋙ Выезжающее CSS3 меню
- Меню навигации ⋙ Горизонтальная раздвижная CSS3 навигация
- Меню навигации ⋙ Универсальное CSS3 меню одна кнопка замечательный пример CSS3 анимации
- Меню навигации ⋙ Стильное горизонтальное меню навигации для сайта с применением CSS3 анимации
- Меню навигации ⋙ Эффектное и простое вертикальное и горизонтальное Lavalamp меню на jQuery
- Основы / CSS ⋙ Что такое CSS хаки или Вендорные префиксы
- Основы / CSS ⋙ Обзор основных CSS3 свойств Меню аккордеон на CSS3 вертикальное
- Основы / Шаблоны ⋙ Блок DIV с закруглёнными углами и тенью с помощью CSS3
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.