因为对动效比较感兴趣，之前也试过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>
就酱
时间： 2024-10-10 01:12:53