webkit动画-变换与恢复

来源：互联网发布：节能降温软件编辑：程序博客网时间：2024/05/21 17:03

作者:敖士伟 ikmb@163.com

<!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=utf-8" /><title>webkit ikmb@163.com</title><style>.content{width:100%;padding:50px;}.box{border: 1px solid #999;width: 100px;height: 100px;-webkit-transition: all 1s;}.content:hover .box {-webkit-transform: scale(2);}</style><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script>function fireeffect(){this.obj;this.startcss;this.endcss;this.timeout;this.fire=function (instancename,targetid,startcss1,endcss1,timeout1){obj=targetid;startcss=startcss1;endcss=endcss1;timeout=timeout1;$("#"+obj).css(startcss);setTimeout(instancename+".end();",timeout);}this.end=function(){$("#"+obj).css(endcss);}}var kkk=new fireeffect();function t(){var start={"-webkit-transform": "scale(2)"};var end={"-webkit-transform": ""};kkk.fire("kkk","box",start,end,1000);}</script></head><body><div class="content"><div class="box" id="box">dddd<br />fdfd</div></div><input type="button" value="fire" onclick="t();" /></body></html>