同一背景图上下切换

想实现鼠标放上去时候，背景图实现1秒钟的动画切换效果（背景图在一张图上面）背景图切换的效果我会做。问题是出在，切换过程中难以实现动画的效果。我用css3的animation定义background-position的时间。发现，图片是切换了。但是没有时间效果。我用jq试过，问题是改变背景定位的css样式，好像没有定义时间的属性。求大神指教

查看完整描述

2 回答

qq_穆_2

TA贡献5条经验获得超0个赞

把代码分享出来看一下呀

反对回复 2015-12-23

飛尚潮流
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>测试4</title> <script src="js/jquery.js"></script> <script> /* $(document).ready(function(){ $("div.more").mouseover(function(){ $(".more").animate(3000,function(){ $(this).css("background-position","507px 41px"); }); }); $("div.more").mouseleave(function(){ $(".more").animate(3000,function(){ $(this).css("background-position","507px 78px"); }); }); }); */ </script> <script type="text/javascript"> var array=document.getElementsByTagName(); </script> <style type="text/css"> #system{margin:120px;padding:50px;width:540px;height:260px;border:1px solid #0CC;} #gaga{width:30px;height:30px;position:absolute;top:420px;left:600px;border:1px solid #099; border-radius:100px; -o-border-radius:100px; -ms-border-radius:100px; -moz-border-radius:100px; -webkit-border-radius:100px; background:url(images/body_01.png) scroll 507px 78px; transition:all 0.4s; } #gaga:hover{ background:url(images/body_01.png) scroll 507px 41px; } </style> </head> <body> <div class="more"><a id="gaga" href="" target="_blank"></a></div> </body> </html>

回复 2015-12-23

热搜

最近搜索清空

同一背景图上下切换

同一背景图上下切换

2 回答

添加回答