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 });