标签：style blog http io ar color os sp for
因为对动效比较感兴趣，之前也试过ae和ps的时间轴，但还是没太多兴趣一个个调整关键帧，了解一下后发现css3的动效很强悍，基本够用了，有些不足js也可以补充，我是尽量偏向css3，现在也不考虑兼容性的问题（==期末了）。
demo
刚才弄得一个小效果，之前不知道在哪看过这个效果一直觉得很吊，试着有transform做了一下做出来了，主体还是css，js进行了一些属性操作
1 *{margin:0;padding:0} 2 .div1{width:200px;height:200px;background:grey;overflow:hidden;position:relative;float:left} 3 .div2{width:200px;height:200px;background:#000;position:absolute;left:-200px;transition:.5s;color:white;text-align:center}
css代码如上，本来可以纯css实现的，因为想多用用js，所以（无视新手==）。。。
因为css不可以设置旋转锚点，所以我在实现的时候是平移加rotateZ（在js里添加属性）；js如下
1 window.onload=function(){ 2 var oDiv1=document.getElementsByClassName(‘div1‘); 3 var oDiv2=document.getElementsByClassName(‘div2‘); 4 for(var i=0;i<oDiv1.length;i++){ 5 oDiv1[i].index=i; 6 oDiv1[i].onmouseover=function(){ 7 oDiv2[this.index].style.left=‘0px‘; 8 oDiv2[this.index].style.transform=‘rotateZ(360deg)‘ 9 } 10 oDiv1[i].onmouseout=function(){ 11 oDiv2[this.index].style.left=‘-800px‘; 12 oDiv2[this.index].style.transform=‘rotateZ(-360deg)‘ 13 } 14 } 15 }
第一次写博客不知道写啥了，也可能是太简单了吧。。==顺便再把html贴上吧
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>RunJS</title> </head> <body> <div class="div1"> <div class="div2"> <p>dede</p> </div> </div> <div class="div1"> <div class="div2"> <p>dede</p> </div> </div> <div class="div1"> <div class="div2"> <p>dede</p> </div> </div> </body> </html>
就酱
标签：style blog http io ar color os sp for
原文地址：http://www.cnblogs.com/xiaqi/p/4165772.html
