Увеличивающиеся кнопки и крутящийся логотип

/ 👁 4685

Думаю, Вы, скорее всего, в курсе, как менять стиль элементов при наведении на них указателя мыши. А знаете ли Вы, как можно сделать настоящую плавную анимацию кнопок и крутящийся логотип только лишь посредствам файла таблицы стилей? Если стало интересно, то читайте дальше…
дополнительные материалы к урокам

демо версия урока

Такую задачу реализовать совсем не сложно, нужно лишь прибегнуть к помощи CSS3. А так как этот стандарт уже все больше и больше завладевает просторами интернета и из «стандарта будущего» становится «стандартом настоящего», то очень советую обратить на него внимание.

Итак, от философских размышлений давайте перейдем к делу. Кстати, то, что у нас получится Вы можете увидеть, щелкнув по иконке «Демо». А в «Исходниках» Вы, как всегда, найдете все исходные файлы.

CSS3: Увеличивающиеся кнопки и анимированный крутящийся логотип

1. Начнем мы, как всегда, с создания html-файла. Я буду использовать синтаксис HTML5, и код моего файла будет достаточно прост, так как создам я лишь шапку сайта, в которой будет содержаться заголовок; кнопки навигации, помещенные в ненумерованный список и изображение логотипа. Больше ничего у нас в файле и не будет, но здесь нам больше ничего и не нужно, так как основная работа будет вестись над кнопками и логотипом.

Вот код нашего html-файла:

<!doctype html>
<html>
<head>
<meta charset="windows-1251">
<title>Стилизуем навигацию</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Наведите указатель мыши на кнопки... а потом на логотип</h1>
<nav>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Продукты</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
<img id="logo" src="logo_nav.png" alt="анимированный логотип">
</header>
</body>
</html>

 

Как Вы можете видеть из кода, вся наша шапка заключена в тег «header», и он, в свою очередь, содержит: заголовок; навигацию в теге «nav» и изображение логотипа.

Также в начале Вы можете видеть подключенный файл таблицы стилей. Пока что мы его еще не создали, поэтому наша страница выглядит вот так.

верстка шапки для сайта

2. Теперь наша задача создать тот самый файл таблицы стилей, который в нашей верстке уже подключен. Создайте файл «style.css» и сохраните его в том же каталоге, что и наш html-файл.

Давайте для начала мы придадим нашей шапке более или менее упорядоченный вид, то есть расставим все элементы на свои места.

Пропишите в файле таблицы стилей следующий код:

body{width:980px; margin:0 auto;}
header{height:180px; width:980px; border:1px solid #CCC; position:relative}
header h1{ text-align:right; padding-right:50px; font-family:Arial, Helvetica, sans-serif;
font-size:24px; color:#666; text-shadow:2px 2px 2px #999}
#logo{position:absolute; top:0px; left:20px}
nav{float:right; padding-right:250px; padding-top:10px;}
nav a{text-decoration:none; color:#FFC;}
nav li{margin-right:13px; padding:7px; border:1px solid #696;
border-radius:5px; background-color:#6C6;
font-family:Arial, Helvetica, sans-serif; font-size:16px;font-weight:600;
box-shadow:0px 0px 5px #096;list-style-type:none; float:left;}

 

Здесь все просто. Сначала мы задаем ширину для тега «body», а также выравниваем его по центру.

Всему блоку шапки «header» мы устанавливаем высоту и ширину, рамку, а также, относительное позиционирование, что в дальнейшем позволит нам позиционировать логотип относительно тега «header».

Заголовку «h1» мы присваиваем выравнивание по правому краю, отступ справа, тип и размер шрифта, а также цвет шрифта и тень от текста.

Логотип (имеющий идентификатор «logo») мы позиционируем абсолютно и устанавливаем для него значения «top» и «left», тем самым определяя его место в нашей шапке.

Блоку, содержащему кнопки (тег «nav») мы присвоим обтекание по правому краю и соответствующие отступы.

У ссылок убираем подчеркивание и присваиваем им цвет.

Тегам «li», в каждом из которых находится ссылка, мы зададим отступы, рамку, скругление, цвет кнопок, тип, размер и толщину шрифта, тень для кнопок, уберем ненужные точки ненумерованного списка, а также зададим обтекание слева, чтобы наши кнопки стояли не в столбец, а в строку.

После применения этих стилей наша шапка будет выглядеть следующим образом.

придание стилей шапке сайта

3. Вот теперь давайте сделаем так, чтобы при наведении указателя мыши на наши кнопки, они немного увеличивались в размерах и меняли свой цвет.

Основным CSS-свойством для создания таких преобразований является transform. Его значение представляет собой тип желаемого преобразования. При помощи этого свойства можно не только изменять размеры элемента, но и поворачивать его на определенный градус, наклонять и т.д.

CSS преобразования появились относительно недавно, поэтому данное свойство все еще нужно применять с префиксами производителей браузеров.

В качестве значения для «transform» мы будем использовать «scale» (изменение масштаба) с небольшим значением.

Чтобы задать стили для кнопок при наведении на них указателя мыши, мы будем использовать псевдокласс «:hover».

Итак, следующий код пропишите в Вашей таблице стилей:

nav li:hover {
background-color:#093;
-webkit-transform:scale(1.2);
-moz-transform: scale(1.2);
-o-transform:scale(1.2);
-ms-transform:scale(1.2);
transform:scale(1.2);}

 

Если сейчас Вы проверите страницу в браузере и наведете указатель мыши на любую из кнопок, то увидите, как она увеличивается и меняет свой цвет. Но происходит это резко и не очень красиво. Было бы неплохо придать этому эффекту плавности, чтобы увеличение происходило, например, за пол секунды.

Здесь нам поможет свойство transition, которое и позволит осуществить плавный переход, а по сути, анимацию. Его нужно применить к исходному стилю, то есть к стилю до начала анимации. В его параметрах мы передадим над какими стилями мы будем производить анимацию и за какое время.

Свойство «transition» мы также будем использовать с префиксами.

Сейчас все, что нам нужно сделать – это добавить в стили для «nav li» следующий код:

-webkit-transition:all .5s;
-moz-transition:all .5s;
-o-transition:all .5s;
transition:all .5s;

 

Вот сейчас наша анимация будет происходить плавно, и если Вы обновите страницу в браузере и наведете указатель мыши над любой из кнопок, то увидите это.

анимация кнопки в CSS3

4. А теперь переходим к вращению логотипа. Я будут создавать эффект вращения при наведении на логотип указателя мыши. Кстати, можно сделать, чтобы вращение происходило сразу, как пользователь попадает на страницу. Для этого, далее, вместо применения стилей к «#logo:hover», применяйте стили к «#logo».

Я хочу добиться эффекта, чтобы при наведении указателя мыши на логотип, он сначала вращался по часовой стрелки, а потом против и в конце останавливался.

CSS предлагает нам еще один очень мощный механизм для создания анимации. Мы можем создавать анимацию не только от одного стиля к другому, как мы это делали в случае с кнопками, а от одного к другому, к третьему и так далее.

Для этого создаются ключевые кадры (keyframes). Ключевой кадр в анимации – это отдельный кадр в анимации, определяющий внешний вид сцены.

Первым делом нужно настроить ключевые кадры. Здесь дело также не обойдется без префиксов. Возможно, Вам покажется, что это немного громоздко, но так нужно, чтобы анимация работала во всех популярных браузерах.

Просто добавьте следующий код в свою таблицу стилей.

@-webkit-keyframes logo{
from{-webkit-transform:rotate(0);}
50%{-webkit-transform:rotate(-720deg);}
to{-webkit-transform:rotate(0);}
}
@-moz-keyframes logo{
from{-moz-transform:rotate(0);}
50%{-moz-transform:rotate(-720deg);}
to{-moz-transform:rotate(0);}
}
@-o-keyframes logo{
from{-o-transform:rotate(0);}
50%{-o-transform:rotate(-720deg);}
to{-o-transform:rotate(0);}
}
@keyframes logo{
from{transform:rotate(0);}
50%{transform:rotate(-720deg);}
to{transform:rotate(0);}
}

 

Смотрите, здесь мы создаем анимацию. «logo» – это имя анимации, по которой мы далее к ней будем обращаться.

«from» – это первый кадр анимации, он определяет начальную позицию вращения (0 градусов).

«50%» – это второй кадр анимации, в нем наша фигура будет вращена на -720 градусов.

«to» – это последний кадр анимации, и в нем фигура опять возвращается на исходную позицию (0 градусов).

Как видите, в нашей анимации 3 кадра: фигура вращается по часовой стрелке, потом обратно и останавливается. Но кадров, как Вы понимаете может быть и больше.

Сам по себе этот код ничего не делает. Если Вы сейчас попробуете перезагрузить страницу и навести указатель мыши на логотип, то ничего не изменится. Этот код только задает правила для анимации.

А чтобы нам ее реализовать нужно прописать еще небольшой кусочек кода.

#logo:hover{
	-webkit-animation:logo 3s;
	-moz-animation:logo 3s;
	-o-animation:logo 3s;
	 animation:logo 3s;
}

 

Здесь мы присваиваем нашему логотипу псевдокласс «:hover» и прописываем свойство «animation» (как всегда с префиксами). В параметрах мы укажем имя нашей анимации и ее длительность.

Вот и все. Можно обновить страницу в браузере, навести указатель мыши на логотип и насладиться анимацией.

вращающийся логотип CSS3

К сожалению, через скриншот невозможно показать анимацию, но нажав на иконку «Демо» Вы сможете все увидеть.

Это лишь простой пример, а если поэкспериментировать, то можно сделать еще много всего интересного. Тем более, что это далеко не все свойства анимации и переходов в CSS3.

Однако, согласитесь, что это очень здорово иметь возможность создавать несложные анимационные эффекты (а возможно, у Вас получатся и более сложные) при помощи одной лишь таблицы стилей, и не прибегая к помощи сторонних программ.

На этом сегодня у меня все. Как всегда, жду Ваших комментариев.

Делитесь уроком при помощи кнопок социальных сетей и подписывайтесь на обновления блога. Обещаю Вам много всего интересного.

С Вами была Анна Котельникова.

Успехов Вам, друзья! Учитесь, развивайтесь, генерируйте креативные идеи. В общем творите!

До новых встреч!

Tags: ,

2 комментария

  1. Табылды 19.07.2022
    • Anna Kotelnikova 19.07.2022

Leave a Reply