на чистом CSS

Меню с эффектом LavaLamp

(на основе плагина JQuery)

Описание:

Я думаю, что вы уже видели, анимированные меню с эффектом LavaLamp (на основе плагина JQuery).

Сегодня я хотел бы вам рассказать, как повторить то же поведение только на чистом CSS3 (без JavaScript). В нашем меню я буду использовать CSS3 transitions (для анимации элементов). Итак, если вы готовы, давайте начинать.

Шаг 1. HTML

Как обычно, мы начнем с HTML. Вот HTML-код нашего меню. Неудивительно, что оно будет сделано на основе UL-LI. Самое интересное будет в CSS стилях, конечно.

HTML

Шаг 2. CSS

CSS

Заключение

Надеюсь, вам понравилось наше новое меню на CSS3, не забудьте сказать спасибо и оставить комментарий Удачи!