Большинство пользователей ежедневно просматривают пользовательские интерфейсы, независимо от того, находятся ли они в мобильном приложении или на веб-сайте, поэтому важно правильно их настроить при их создании, и если вы сможете оживить их с помощью некоторой анимации CSS, тем лучше.
При построении для Интернета, особенно когда речь идет о анимации, вы должны учитывать такие вещи, как поддержка и производительность браузера. В этом уроке мы рассмотрим два лучших решения для создания анимаций и переходов в пользовательском интерфейсе.
Мы будем использовать комбинацию CSS и GreenSock (GSAP). Мы все знаем о CSS, но некоторые из вас могут не знать о платформе GreenSock. GreenSock — это платформа JavaScript, которая позволяет легко создавать потрясающие анимации с элементами HTML, используя всего несколько строк кода.
Изображения и логотипы особенно выделялись намного больше за последние несколько лет. Как часто мы используем emojis, а не текст? Мобильные навигаторы, похоже, используют значки, а не текст, и с течением времени пользователи узнают, куда нас приведут. Мы начнем с создания анимированной навигационной панели с использованием логотипов.
У нас есть шесть значков навигации и один из них видно, как будет выглядеть состояние зависания после завершения анимации
Содержание статьи
Прежде всего, мы создадим новый индекс .html и настройте нашу навигационную зону вместе с шестью ссылками. Каждая ссылка wi будет состоять из иконы, взятой из ионики. Нам нужно будет присвоить класс каждому.
Мы не будем подробно описывать полный HTML или CSS-документ, но вы можете получить полный список кодов из GitHub.
Затем нам нужно будет создать файл CSS, который называется style.css, а затем вставьте следующую строку кода для импорта Ionicons:
@import url (https://code.ionicframework.com/ionicons/2.0.1/css /ionicons.min.css);
Мы создадим класс navlogo для наших навигационных изображений внутри таблицы стилей. Здесь мы будем устанавливать положение, высоту, размер шрифта и т. Д.
.navlogo {
позиция: относительная;
размер шрифта: 40 пикселей;
ширина: 75 пикселей;
margin: 40px;
высота: 75 пикселей;
line-height: 75px;
display: inline-block;
цвет: #fff;
}
.navlogo: after {
позиция: абсолютная;
top: 0;
bottom: 0;
left: 0;
право: 0;
border: 2px solid # e6e6e6;
content: '';
z-index: -1;
радиус границы: 50%;
}
Затем нам нужно настроить анимацию для нашего элемента .navlogo . Здесь мы создадим эффекты вращения и перехода, а также изменим цвет элемента при наведении.
.navlogo: before,
.navlogo: after {
-webkit-переход: все 0,45-х разовое;
переход: все 0.45s облегчения;
}
.navlogo: парить,
.navlogo: активный,
.navlogo.hover {
цвет: # c0392b;
}
.navlogo: парить: после того, как,
.navlogo: активный: после того, как,
.navlogo.hover: после {
border-color: transparent # c0392b;
-webkit-transform: rotate (360deg);
transform: rotate (360deg);
}
Наконец, нам нужно будет добавить событие, которое удалит класс hover, когда мышь больше не будет вибрировать над нашими логотипами. Это делается для того, чтобы наш логотип вышел из анимации. Создайте новый файл JavaScript с именем main.js, а затем введите следующий код:
$ (". Hover"). Mouseleave (
function () {
$ (Это) .removeClass ( «парить");
}
)
Наша навигация теперь готова к работе, кроме добавления гиперссылок. Мы достигли этого только с помощью CSS3.
Кнопки создания и анимации при загрузке
Кнопки будут отображаться один за другим с помощью двухсекундной задержки. GreenSock позволяет вам сделать это с любым элементом HTML
Загрузка...
