css3学习一

浏览数：44 / 时间：2015年06月09日

因为对动效比较感兴趣，之前也试过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>