Question

所以我在网站上工作，并且我使用 HTML5 nav 标签的导航栏：

<nav class="contact">
                <a   href="#"><img src="images/twitter_icon.png"></a>
                <a   href="#"><img src="images/insta_icon.png"></a>
                <a   href="#"><img src="images/git_icon.png"></a>
                <a   href="#"><img src="images/youtube_icon.png"></a>
                <a   href="#"><img src="images/email_icon.png"></a>
                <a   href="#"><img src="images/stack_icon.png"></a>
</nav>

这是在主页 div

中

现在我想在用户将鼠标悬停在这些图片上时为这些图片制作动画。我提出了以下内容，但它是整个导航栏的动画：

nav {
width: 100%;
display: block;
position: absolute;
margin-top: 30px;
}
nav a img {
width: 40px;
height: 40px;
}
nav a:hover img {
animation-name: move;
animation-duration: 0.2s;
}
@keyframes move{
from{margin-top: 0%;}
to{margin-top: 10%;}
}
nav a {
display: inline-block;
margin: 12px 0px 10px 20px;
}

我做错了什么？我对这些语言有点生疏，因为我暂时没有使用它们

Answer 1

这是因为当您悬停锚点时nav的高度会发生变化（请参阅此demo）。您还将它们放置为内联块...因此它们在底部垂直对齐。

向锚点添加vertical-align: top，它可以工作：

＆＃13;

nav {
    width: 100%;
    display: block;
    position: absolute;
    margin-top: 30px;
}
nav a img {
    width: 40px;
    height: 40px;
}
nav a:hover img {
    animation-name: move;
    animation-duration: 0.2s;
}
@keyframes move {
    from {
        margin-top: 0%;
    }
    to {
        margin-top: 10%;
    }
}
nav a {
    display: inline-block;
    margin: 12px 0px 10px 20px;
    vertical-align: top;
}

＆＃13;

<nav class="contact">
    <a   href="#"><img src="images/twitter_icon.png"/></a>
    <a   href="#"><img src="images/insta_icon.png"/></a>
    <a   href="#"><img src="images/git_icon.png"/></a>
    <a   href="#"><img src="images/youtube_icon.png"/></a>
    <a   href="#"><img src="images/email_icon.png"/></a>
    <a   href="#"><img src="images/stack_icon.png"/></a>
</nav>

＆＃13;

如何在导航栏中为单个链接设置动画？

1 个答案: