Автор этой статьи попытался сделать оригинальное навигационное меню на CSS и jQuery с использованием вращающейся анимации.

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

Поэтому был написан JS скрипт, который добавляет или снимает класс с элемента при наведении на него курсором мыши.

HTML

<nav id="nojquery">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

CSS

nav#nojquery li a:hover, .rotate {
    -moz-animation: animrotate 2s;
    -webkit-animation: animrotate 2s;
    background: #222;
}
@-moz-keyframes animrotate {
    100% {background: green;-moz-transform: perspective( 200px ) rotateY( 360deg );}
}
@-webkit-keyframes animrotate {
    100% {background: green;-webkit-transform: perspective( 200px ) rotateY( 360deg );}
}

jQuery

$(function() {
    $("#withjquery li a").hover(function() {
        var el = this;
        $(this).addClass('rotate');
        setTimeout(function() {
            $(el).removeClass('rotate');
        }, 2000);
    });
});

Также стоит отметить, что пример работает только в браузерах Firefox, Chrome и Safari.

Добавлено: 23 Апреля 2018 11:59:48 Добавил: Андрей Ковальчук Нравится 0

Добавить