用CSS悬停动画div div

我正在尝试使用CSS3的@keyframes规则悬停悬停div。动画的代码位于this page的最底部（紧接在慷慨标注的“HERE BE ANIMATION”评论ASCII艺术之后）。这包括@keyframes规则，div和div：hover。我想要这个动画的页面是right here。出于某种原因，动画不起作用;这是我第一次尝试使用CSS动画，所以可能会出现一些新手的错误。用CSS悬停动画div div

来源

2012-04-12 Jules

任何浏览器都不支持@keyframes规则。 Firefox支持替代方法，即@ -moz-keyframes规则。 Safari和Chrome支持替代的@ -webkit-keyframes规则。你确定你还需要惹这个吗？ =） – 2012-04-12 01:10:23

我认为@ -webkit-keyframes规则已经在那里了;我放弃了-moz，因为Dreamweaver没有将它识别为有效的@keyframes变体。但我在Chrome中测试了该页面，并且不显示动画。 – Jules 2012-04-12 01:26:10

我想你留下了一个指向你感兴趣的实际页面的问题链接 – 2012-04-12 01:59:30

如果您试图将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-12 01:19:58

我很喜欢，但是我对jQuery的了解要少于我对CSS3的了解（因为我从来没有使用它）。如果这是唯一可能的解决方案，我会尝试一下;否则，我宁愿坚持CSS3。 – Jules 2012-04-12 01:27:37

其实，我刚刚把最新的jquery.js放到了我的根目录/ js文件夹中，并且我已经准备好了jQuery。我在哪里放置这个脚本？ $（'div'）.hover（function（）{ $（this）.animate（{top：'200px'}）; }）; – Jules 2012-04-12 01:37:18

看到我编辑的答案。 – 2012-04-12 01:37:22

用CSS悬停动画div div

回答

相关问题