首页 > 代码库 > css3学习一
css3学习一
因为对动效比较感兴趣，之前也试过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>
就酱
css3学习一
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。