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