Question

大家好我想创建一个类似于这个网站的菜单：http://tommasoraspo.com/creativepartners/DesignLovers/index.html

但我不知道当我悬停链接时，我会如何设置书签动画。我想过使用animate.css（slideInDown动画）但是它只会在悬停时出现，但在悬停时不会再回来。

在悬停时启动动画：

function animationHover(element, animation){
    element = $(element);
    element.hover(
        function() {
            element.addClass('animated ' + animation);        
        },
        function(){
            //wait for animation to finish before removing classes
            window.setTimeout( function(){
                element.removeClass('animated ' + animation);
            }, 2000);         
        });
}

Answer 1

您指向的网站未使用javascript。相反，它们使用css3过渡来为加载网站时“非画布”的图像的背景位置设置动画。

这是一个带有相关css / html的fiddle。

您可能需要调整值以适合您的特定设计和图像。

HTML：

<ul class="nav">
    <li><a href="#">Menu Item 1</a>

    </li>
    <li><a href="#">Menu Item 2</a>

    </li>
    <li><a href="#">Menu Item 3</a>

    </li>
    <li><a href="#">Menu Item 4</a>

    </li>
</ul>

CSS：

ul.nav {
    list-style: none;
    margin: 0;
}
ul.nav li {
    float: left;
    margin: 0 0 0 30px;
}
ul.nav li.current a, ul.nav li a:hover {
    background-position: 50% 0;
}
ul.nav li a {
    height: 50px;
    line-height: 50px;
    display: block;
    padding: 50px 20px 0;
    position: relative;
    background: url(http://lorempixel.com/50/70/abstract/) no-repeat 50% -90px;
    -webkit-transition: background-position 0.2s linear;
    -moz-transition: background-position 0.2s linear;
    transition: background-position 0.2s linear;
}

悬停链接时，动画容易进入并轻松取出

1 个答案: