css3-12 transform:scale(1.2,1.2)實現移入元素變大特效

時間 2020-06-22

標籤 css3 css transform scale 1.2 實現移入元素變大特效欄目 CSS 简体版

原文原文鏈接

css3-12 transform:scale(1.2,1.2)實現移入元素變大特效

1、總結

一句話總結：transform:scale(1.2,1.2)鼠標移入的時候變大一點點，超出邊框的部分隱藏掉。

一、如何設計出好看的動態效果？

去別人網站參考css

記得把功能寫成函數html

二、通常放大特效中多餘的部分被怎麼樣了？

通常都是被影藏了，尤爲是有邊框的時候，多餘部分隱藏纔好看jquery

15  overflow:hidden;

三、transform:scale(,)的兩個參數是什麼？

橫向和縱向的放大倍數css3

26 $('img').mouseenter(function(){ 27  $(this).css({'transform':'scale(1.2,1.2)'}); 28 });

四、如何用transform實現自動的動畫效果？

setInterval()+css()函數

animate()方法不行動畫

還要設置一個數作參數，好比下面的選擇，必定要有參數，否則樣式沒有改變是沒有動畫效果的網站

 3  setInterval(function(){  4  s+=30;  5  $('div').css({'transform':'rotate('+s+'deg)'});

2、transform:scale(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 });

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。