MegaWeb.su Главная > Меню навигации > Горизонтальное Lavalamp меню на CSS3

Горизонтальное Lavalamp меню на CSS3


17-03-2011, 17:10. Разместил: Admin
Горизонтальное Lavalamp меню на CSS3Стильное эффектное горизонтальное 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
Вернуться назад