0

小提琴：http: //jsfiddle.net/FtQ4d/1/

我正在为我的一个课程做 HTML 和 CSS，并且我已经为我的项目创建了一个登录页面。我只想让它在顶部显示 INDEX.HTML，并在页面底部显示左手和右手的图像。我正在使用 CSS 为手设置动画，使其在悬停在屏幕上时独立移动并在几秒钟内返回。这对左手来说效果不错，但是当我将鼠标悬停在右手上时，两只手最终都会向下移动。我怎样才能解决这个问题？

HTML

<html>
<head>
    <title>Hand (Working Title)</title>
    <link type="text/css" rel="stylesheet" href="handstyle.css"/>
</head>
<body>
    <div id="ind_wrap">
        <p id="ind">INDEX.HTML</p>
        <img src="r_hand.png" id="r_hand">
        <img src="l_hand.png" id="l_hand">
    </div>
</body>

这是我的CSS：

body {
    overflow:hidden;
}
#ind_wrap {
    height:100%;
    width:100%;
}
#ind {
    font-size:1400%;
    color:white;
    font-family:Lazy Sunday;
    text-align:center;
    text-shadow: 3px 1px #000000;
    margin-top:-2%;
}
#span_e {
    color:black;
}
#r_hand {
    background-image:url("rhand.png");
    margin-top:-28%;
    margin-left:50%;
    height:100%;
    width:35%;
    animation:fr_bottom 4s 1;
}
#r_hand:hover {
    animation:m_right 4s 1;
}
#l_hand {
    margin-top:-52%;
    margin-left:8%;
    height:100%;
    width:35%;
    animation:fl_bottom 4s 1;
}
#l_hand:hover {
    animation:m_left 3s 1;
}
@keyframes fr_bottom{
    0%{margin-top:100%;}
    100%{margin-top:-28%;}}

@keyframes fl_bottom{
    0%{margin-top:100%;}
    100%{margin-top:-52%;}}

@keyframes m_left{
    0%{transform:rotate(0deg);margin-left:8%;margin-top:-52%}
    100%{transform:rotate(-50deg);margin-left:2%;margin-top:100%;}}

@keyframes m_right{
    0%{transform:rotate(0deg);margin-left:50%;margin-top:-28%;}
    100%{transform:rotate(50deg);margin-left:52%;margin-top:100%;}}
4

1 回答 1

0

您的 HTML 存在问题。左手并不是真的在右手的左边，它只是看起来那样，因为行换行并且手在下一行结束。这就是为什么你需要margin-top:-52%让一个和margin-top:-28%另一个在屏幕上的相同垂直位置上对齐。你应该先解决这个问题。
此外，由于vertical-align:baseline默认情况下所有内容都有，因此这两个图像将自己对齐到彼此的底部。也就是说，如果一个向下移动，另一个也向下移动。但这很容易通过vertical-align:top明确给出它们来解决。

现在我稍微摆弄了一下你的小提琴，但是当我完成时，我已经改变了很多，删除了很多对演示不必要的东西，我不确定你是否仍然可以使用它。在这里，以防万一。

（虽然我无法解决一些问题。如果将鼠标悬停在手的顶部附近，它会向下滑动一点，但不会再悬停在上面；它会从视图中消失，因为另一个动画开始。只有当鼠标靠近窗口底部时，才会出现完整的向下滑动效果。）

于 2013-10-06T11:21:01.570 回答