Креативное анимированное меню CSS3
Эксперименты с CSS3 могут привести к замечательным эффектам, которые появляются при наведении курсора мыши. Идея заключается в простом сочетании элементов (иконки, основного и вспомогательного заголовков), которые анимируются и трансформируются при наведении курсора мыши. В уроке объясняется, что происходит с элементами.
Иконки в демонстрации созданы с использованием шрифта Web Symbols, которые подключается с помощью @font-face. Шрифт разработан студией Just Be Nice.
Разметка HTML
Структура HTML для меню представляет собой неупорядоченный список, в котором каждый пункт является ссылкой, содержащей элемент span иконки и элемент div содержания (для основного и вспомогательного заголовков):
<ul class="ca-menu">
<li>
<a href="#">
<span class="ca-icon">A</span>
<div class="ca-content">
<h2 class="ca-main">Выдающийся сервис</h2>
<h3 class="ca-sub">Персонально для вас</h3>
</div>
</a>
</li>
. . .
</ul>
CSS
Общая часть стилей для всех примеров включает шрифт для иконок:
@font-face {
font-family: 'WebSymbolsRegular';
src: url('websymbols/websymbols-regular-webfont.eot');
src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('websymbols/websymbols-regular-webfont.woff') format('woff'),
url('websymbols/websymbols-regular-webfont.ttf') format('truetype'),
url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Путь к файлам указывается относительно файла CSS. Следовательно, они располагаются в папке css/websymbols/.
Преимуществом использования шрифта для формирования иконок является то, что к ним можно применять все эффекты CSS3 (например, тени текста) и легко масштабировать так, как нужно.
Стиль для неупорядоченного списка будет одинаковый для всех примеров с небольшими вариациями:
.ca-menu{
padding: 0;
margin: 20px auto;
width: 550px;
}
В последующем описании примеров будут показаны стили всех элементов, участвующих в формировании эффекта.
В первом примере будут описаны все элементы, а в последующих фокус сместиться на отличиях.
Примечание:В описании примеров не используются префиксы браузеров, но в коде демонстрации они присутствуют.
Пример 1
В данном варианте сформировано вертикальное меню. При наведении курсора мыши изменяется размер элементов и цвет фона всего пункта.
Стили для пункта списка:
.ca-menu li{
width: 550px;
height: 100px;
overflow: hidden;
display: block;
background: #fff;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
margin-bottom: 4px;
border-left: 10px solid #000;
transition: all 300ms ease-in-out;
}
.ca-menu li:last-child{
margin-bottom: 0px;
}
Трансформация будет выполняться для всех свойств, так как нужно изменять цвет рамки и фона.
Ссылка будет иметь следующие стили:
.ca-menu li a{
text-align: left;
display: block;
width: 100%;
height: 100%;
color: #333;
position:relative;
}
Стили для одного элемента. Элемент span иконки будет размещаться слева:
.ca-icon{
font-family: 'WebSymbolsRegular', cursive;
font-size: 20px;
text-shadow: 0px 0px 1px #333;
line-height: 90px;
position: absolute;
width: 90px;
left: 20px;
text-align: center;
transition: all 300ms linear;
}
Мы используем шрифт Web Symbol, поэтому каждый символ будет иконкой.
Контейнер для содержания будет иметь следующие стили:
.ca-content{
position: absolute;
left: 120px;
width: 470px;
height: 60px;
top: 20px;
}
Элементы содержания будут изменять размер шрифта и использовать линейную трансформацию.
.ca-main{
font-size: 30px;
transition: all 300ms linear;
}
.ca-sub{
font-size: 14px;
color: #666;
transition: all 300ms linear;
}
А при наведении курсора мыши на пункт меню элемент списка будет изменять размеры шрифта и цвета:
.ca-menu li:hover{
border-color: #fff004;
background: #000;
}
.ca-menu li:hover .ca-icon{
color: #fff004;
text-shadow: 0px 0px 1px #fff004;
font-size: 50px;
}
.ca-menu li:hover .ca-main{
color: #fff004;
font-size: 14px;
}
.ca-menu li:hover .ca-sub{
color: #fff;
font-size: 30px;
}
Пример 2
Во втором варианте мы добавим анимации для элементов содержания. Они будут выдвигаться сверху и снизу.
.ca-menu li:hover{
background: #e1f0fa;
}
.ca-menu li:hover .ca-icon{
font-size: 40px;
color: #259add;
opacity: 0.8;
text-shadow: 0px 0px 13px #fff;
}
.ca-menu li:hover .ca-main{
opacity: 1;
color:#2676ac;
animation: moveFromTop 300ms ease-in-out;
}
.ca-menu li:hover .ca-sub{
opacity: 1;
animation: moveFromBottom 300ms ease-in-out;
}
Определим две анимации. Первая будет начинаться с опускания соответствующего элемента вниз на 200%. Также непрозрачность элемента устанавливается в 0. А конечной точкой анимации будет установка элемента в его позицию (0%) и полной непрозрачностью.
@keyframes moveFromBottom {
from {
opacity: 0;
transform: translateY(200%);
}
to {
opacity: 1;
transform: translateY(0%);
}
}
Вторая анимация использует тот же принцип, но для смещения элемента вверх:
@keyframes moveFromTop {
from {
opacity: 0;
transform: translateY(-200%);
}
to {
opacity: 1;
transform: translateY(0%);
}
}
Пример 3
В данном варианте при наведении курсора мыши меняется цвет фона и текста. Также инока увеличивается и поворачивается вокруг оси, для чего используется увеличение размера шрифта иконки:
.ca-menu li:hover{
background-color: #000;
}
.ca-menu li:hover .ca-icon{
color: #f900b0;
font-size: 120px;
opacity: 0.2;
left: -20px;
transform: rotate(20deg);
}
.ca-menu li:hover .ca-main{
color: #f900b0;
opacity: 0.8;
}
.ca-menu li:hover .ca-sub{
color: #fff;
opacity: 0.8;
}
Пример 4
Примеры с 4 по 8 используют другой шаблон для меню. Пункты меню располагаются горизонтально рядом друг с другом.
.ca-menu li{
width: 200px;
height: 300px;
overflow: hidden;
position: relative;
float: left;
border: 5px solid #fff;
background: #e2f0ff;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
margin-right: 4px;
transition: all 300ms linear;
}
.ca-menu li:last-child{
margin-right: 0px;
}
Иконка располагается в верхней половине пункта по центру:
.ca-icon{
font-family: 'WebSymbolsRegular', cursive;
color: #c5e4f4;
font-size: 90px;
text-shadow: 1px 0px 1px rgba(255,255,255,0.7);
line-height: 150px;
position: absolute;
width: 100%;
height: 50%;
left: 0px;
top: 0px;
text-align: center;
transition: all 200ms linear;
}
Контейнер содержания располагается в нижней части пункта:
.ca-content{
position: absolute;
left: 0px;
width: 100%;
height: 50%;
top: 50%;
}
Основной и вспомогательный заголовки имеют следующие стили:
.ca-main{
font-size: 30px;
color: #005382;
opacity: 0.8;
text-align: center;
transition: all 200ms linear;
}
.ca-sub{
text-align:center;
font-size: 14px;
color: #666;
line-height: 40px;
opacity: 0.8;
transition: all 200ms linear;
}
При наведении курсора мыши на пункт иконка будет размываться и выскальзывать сверху, также изменяется цвет фона, а содержание будет выскальзывать сверху и снизу:
.ca-menu li:hover{
background-color: #fff;
}
.ca-menu li:hover .ca-icon{
text-shadow: 0px 0px 20px #c5e4f4;
color: transparent;
animation: moveFromTop 400ms ease;
}
.ca-menu li:hover .ca-main{
color: #000;
animation: moveFromTop 300ms ease;
}
.ca-menu li:hover .ca-sub{
color: #000;
animation: moveFromBottom 500ms ease;
}
Размытие иконки происходит за счет установки прозрачности текста и определения тени с большим рассеянием. Анимация определяется такой же как и выше приведенном примере за исключением установки большего значения смещения.
Пример 5
В пятом примере иконка будет выскальзывать слева, главный заголовок - справа, а вспомогательный заголовок - снизу:
.ca-menu li:hover{
background:#fff;
}
.ca-menu li:hover .ca-icon{
color: #afa379;
font-size: 90px;
opacity: 0.1;
animation: moveFromLeft 400ms ease;
}
.ca-menu li:hover .ca-main{
color: #afa379;
animation: moveFromRight 300ms ease;
}
.ca-menu li:hover .ca-sub{
color: #000;
animation: moveFromBottom 500ms ease;
}
Анимация moveFromBottom уже использовалась в выше приведенных примерах. А анимация moveFromLeft смещает соответствующий элемент влево и затем перемещает его на оригинальную позицию:
@keyframes moveFromLeft{
from {
transform: translateX(-100%);
}
to {
transform: translateX(0%);
}
}
Пример 6
В данном варианте заголовок будет выскальзывать слева и одновременно поворачиваться вокруг своей оси:
.ca-menu li:hover{
background-color: #000;
}
.ca-menu li:hover .ca-icon{
color: #fff;
font-size: 90px;
}
.ca-menu li:hover .ca-main{
color: #00ccff;
animation: moveFromLeftRotate 300ms ease;
}
.ca-menu li:hover .ca-sub{
color: #fff;
animation: moveFromBottom 500ms ease;
}
Анимация moveFromLeftRotate будет перемещать элемент и одновременно поворачивать его вокруг оси:
@keyframes moveFromLeftRotate{
from {
transform: translateX(-100%) rotate(-90deg);
}
to {
transform: translateX(0%) rotate(0deg);
}
}
Пример 7
В данном примере вспомогательный заголовок будет размещаться внизу пункта:
.ca-sub{
text-align:center;
font-size: 14px;
color: #666;
line-height: 40px;
opacity: 0.8;
position: absolute;
bottom: 0;
width: 100%;
transition: all 200ms linear;
}
При наведении курсора мыши вспомогательный заголовок будет выскальзывать снизу и менять цвет фона, иконка будет выскальзывать снизу, а основной заголовок будет увеличиваться до от маленького до нормального размера:
.ca-menu li:hover{
background-color: #000;
}
.ca-menu li:hover .ca-icon{
color: #ff2020;
animation: moveFromBottom 300ms ease;
}
.ca-menu li:hover .ca-main{
color: #ff2020;
animation: smallToBig 300ms ease;
}
.ca-menu li:hover .ca-sub{
color: #000;
background-color: #ff2020;
animation: moveFromBottom 500ms ease;
}
Анимация smallToBig выполняет трансформацию масштаба:
@keyframes smallToBig{
from {
transform: scale(0.1);
}
to {
transform: scale(1);
}
}
Пример 8
В данном примере будет увеличиваться весь пункт при наведении курсора мыши. Для эффекта будет изменяться масштаб до значения 1.1. Также иконка с идентификатором #heart будет особенной. Она будет красной, а при наведении курсора мыши для нее будет использоваться анимация smallToBig в бесконечном цикле для имитации биения сердца.
.ca-menu li:hover{
background-color: #000;
z-index:999;
transform: scale(1.1);
}
.ca-menu li:hover .ca-icon{
color: #ccff00;
font-size: 90px;
opacity:0.3;
}
.ca-menu li:hover .ca-icon#heart{
animation: smallToBig 900ms alternate infinite ease;
}
.ca-menu li:hover .ca-main{
color: #ccff00;
animation: smallToBig 300ms ease;
}
.ca-menu li:hover .ca-sub{
color: #ccff00;
animation: moveFromBottom 500ms ease;
}
Пример 9
Два последних примера используют круги для оформления пунктов меню:
.ca-menu li{
width: 230px;
height: 230px;
border: 10px solid #f6f6f6;
overflow: hidden;
position: relative;
float:left;
background: #fff;
margin-right: 4px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
border-radius: 125px;
transition: all 400ms linear;
}
Чтобы создать круг, нужно установить радиус для рамки равным половине высоты/ширины элемента. Размещаем элемент абсолютно и центрируем его.
При наведении курсора мыши на пункт меню будет происходить следующее:
.ca-menu li:hover{
background: #f7f7f7;
border-color: #fff;
transform: rotate(360deg);
}
.ca-menu li:hover .ca-icon{
color: #555;
font-size: 60px;
}
.ca-menu li:hover .ca-main{
display: none;
}
.ca-menu li:hover .ca-sub{
opacity: 0.8;
}
Пример 10
В последнем примере пункты списка имеют левое поле равное -48px. они перекрывают друг друга. При наведении курсора мыши будет изменяться масштабт и увеличиваться значение свойства z-index, чтобы поднять нужный пункт над остальными.
.ca-menu li:hover{
border-color: #333;
z-index: 999;
transform: scale(1.1);
}
.ca-menu li:hover .ca-icon{
color: #000;
font-size: 60px;
text-shadow: 0px 0px 1px #000;
animation: moveFromBottom 300ms ease;
}
.ca-menu li:hover .ca-main{
color: #000;
animation: moveFromBottom 500ms ease;
}
Заключение
Все трансформации и анимации будут работать в последних версиях современных браузеров.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/IIc_fWqhmYA/lessons.php
|
Эксперименты с CSS3 могут привести к замечательным эффектам, которые появляются при наведении курсора мыши. Идея заключается в простом сочетании элементов (иконки, основного и вспомогательного |
РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Все мы сидим в сточной канаве, но некоторые при этом смотрят на звезды Уайльд Оскар - (1854-1900) - английский писатель |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их !
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Мы создаем практически любые сайты от продающих страниц до сложных, высоконагруженных и нестандартных веб приложений! Наши сайты это надежные маркетинговые инструменты для успеха Вашего бизнеса и увеличения вашей прибыли! Мы делаем красивые и максимально эффектные сайты по доступным ценам уже много лет!
Комплексный подход это не просто продвижение сайта, это целый комплекс мероприятий, который определяется целями и задачами поставленными перед сайтом и организацией, которая за этим стоит. Время однобоких методов в продвижении сайтов уже прошло, конкуренция слишком высока, чтобы была возможность расслабиться и получать \ удерживать клиентов из Интернета, просто сделав сайт и не занимаясь им...
Мы оказываем полный комплекс услуг по сопровождению сайта: информационному и техническому обслуживанию и развитию Интернет сайтов.
Контекстная реклама - это эффективный инструмент в интернет маркетинге, целью которого является увеличение продаж. Главный плюс контекстной рекламы заключается в том, что она работает избирательно.