1

我正在尝试使用 CSS3 的 @keyframes 规则在悬停时为 div 设置动画。动画的代码在这个页面的最底部（就在慷慨标记的“HERE BE ANIMATION”评论ASCII艺术之后）。这包括@keyframes 规则、div 和 div:hover。我想要这个动画的页面就在这里。由于某种原因，动画不起作用；这是我第一次尝试使用 CSS 动画，所以在某处可能存在一些新手错误。

4

1 回答 1

1

如果您尝试将 div 从 0px 设置为 200px，则使用 jQuery 解决方案要容易得多。与 @keyframe 相比，jQuery 提供了跨浏览器兼容性，后者仅在 Safari 和 Chrome 中受支持。

这是一个例子：http: //jsfiddle.net/ZgcxL/

编辑：

如果您不希望您的用户仅限于 Chrome 和 Safari，那么您绝对应该考虑使用 jQuery。使用起来非常简单。只需在标签之间的某处添加此代码<head></head>。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('.macanimation').hover(function() {
        $(this).animate({top: '200px'});
    });
  });
</script>

编辑2：

我忘记了 document.ready()。重新粘贴上面的代码。还要添加位置：绝对；到您的 div 并将“px”添加到您的宽度：

div.macanimation {
    position: absolute;
    width:960px;
    height:500px;
    padding-left:40px;
    padding-right:40px;
    margin:auto;
    background-image:url(/Photos/MacHQ.png);
}

测试，工作。

于 2012-04-12T01:19:58.900 回答