Анимация кнопки выпадающего меню исключительно средствами HTML и CSS

В статье описывается довольно простой способ реализации анимации для :hover и :active эффектов иконки выпадающего меню.

Анимация кнопки выпадающего менюРеализация анимации заключается в создании иконки на основе мультипликсирвания тега <i>, офрмления и анимации каждой копии.

Для активации последнего состояния ("с крестиком") кнопке необходимо присвоить класс active

HTML:

<span class="animated-button">
Menu
<span class="menu-icon">
<i></i><i></i><i></i>
</span>
</span>

CSS:

.animated-button {
position: relative;
/* Используйте стили оформления как у кнопок на сайте,
однако стоит учитывать, что из-за абсолютного поизиционирования
иконки стоит дать отступ справа минимум в 50px */
padding: 0 50px 0 20px;
}
.animated-button .menu-icon {
 position: absolute;
height: 33px;
right: 20px;
top: 10px;
width: 25px;
}
.animated-button .menu-icon > i {
display: block;
width: 25px;
height: 4px;
background: #555;
position: relative;
transition: all 200ms linear;
}
.animated-button .menu-icon > i:nth-child(1) {
top: 5px
}
.animated-button .menu-icon > i:nth-child(2) {
top: 10px
}
.animated-button .menu-icon > i:nth-child(3) {
top: 15px
}
.animated-button:hover {
/* Стили кнопки "при наведении" */
}
.animated-button:active {
/* Стили активной кнопки */
}
.animated-button.active .menu-icon > i:nth-child(1) {
top: 13px;
transform: rotate(45deg);
}
.animated-button.active .menu-icon > i:nth-child(2) {
top: 0;
opacity: 0;
}
.animated-button.active .menu-icon > i:nth-child(3) {
top: 5px;
transform: rotate(-45deg);
}
.animated-button:not(.active):hover .menu-icon > i {
background: #333;
}
.animated-button:not(.active):hover .menu-icon > i:nth-child(1) {
animation: menu-icon-hover ease 1.3s infinite;
}
.animated-button:not(.active):hover .menu-icon > i:nth-child(2) {
animation: menu-icon-hover ease 1.3s infinite;
animation-delay: .1s;
}
.animated-button:not(.active):hover .menu-icon > i:nth-child(3) {
animation: menu-icon-hover ease 1.3s infinite;
animation-delay: .2s;
}
@keyframes menu-icon-hover {
10% {
transform: translate(5px, 0);
opacity: 0;
}
100% {
opacity: 1;
}
}

 

На злобу дня:

Последняя стадия адаптации продукта к рынку – это адаптация рынка к продукту

×
Предложите тему или интересную задачу для следующей статьи:
×

Ждем входящих данных...