css3-12 transform:scale(1.2,1.2)实现移入元素变大特效
css3-12 transform:scale(1.2,1.2)实现移入元素变大特效
一、总结
一句话总结：transform:scale(1.2,1.2)鼠标移入的时候变大一点点，超出边框的部分隐藏掉。
1、如何设计出好看的动态效果？
去别人网站参考
记得把功能写成函数
2、一般放大特效中多余的部分被怎么样了？
一般都是被影藏了，尤其是有边框的时候，多余部分隐藏才好看
15 overflow:hidden;
3、transform:scale(,)的两个参数是什么？
横向和纵向的放大倍数
26 $('img').mouseenter(function(){
27 $(this).css({'transform':'scale(1.2,1.2)'});
28 });
4、如何用transform实现自动的动画效果？
setInterval()+css()
animate()方法不行
还要设置一个数做参数，比如下面的选择，一定要有参数，不然样式没有 改变是没有动画效果的
3 setInterval(function(){
4 s+=30;
5 $('div').css({'transform':'rotate('+s+'deg)'});
二、transform:scale(1.2,1.2)实现移入元素变大特效
1、相关知识
2、代码
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 <style> 7 body{ 8 padding:200px; 9 } 10 11 div{ 12 width:256px; 13 height:256px; 14 border:2px solid #999; 15 overflow:hidden; 16 } 17 </style> 18 <script src='jquery.min.js'></script> 19 </head> 20 <body> 21 <div> 22 <img src="dog.png" alt=""> 23 </div> 24 </body> 25 <script> 26 $('img').mouseenter(function(){ 27 $(this).css({'transform':'scale(1.2,1.2)'}); 28 }); 29 30 $('img').mouseleave(function(){ 31 $(this).css({'transform':'scale(1,1)'}); 32 }); 33 </script> 34 </html>
1 $('div').click(function(){ 2 s=0; 3 setInterval(function(){ 4 s+=30; 5 $('div').css({'transform':'rotate('+s+'deg)'}); 6 m=s/30; 7 if(parseInt(m%4)==0){ 8 $('div').css({'transform':'translate('+200+'px,'+200+'px)'}); 9 }else if(parseInt(m%4)==1){ 10 $('div').css({'transform':'translate('+0+'px,'+0+'px)'}); 11 } 12 else if(parseInt(m%4)==2){ 13 $('div').css({'transform':'translate('+0+'px,'+200+'px)'}); 14 } 15 else{ 16 $('div').css({'transform':'translate('+200+'px,'+0+'px)'}); 17 } 18 },100); 19 });
