css3-12 transform:scale(1.2,1.2)实现移入元素变大特效

一、总结

一句话总结：transform:scale(1.2,1.2)鼠标移入的时候变大一点点，超出边框的部分隐藏掉。

1、如何设计出好看的动态效果？

去别人网站参考

记得把功能写成函数

css3-12 transform:scale(1.2,1.2)实现移入元素变大特效-LMLPHP

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、相关知识

css3-12 transform:scale(1.2,1.2)实现移入元素变大特效-LMLPHP

2、代码

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         body{

             padding:200px;

         }

         div{

             width:256px;

             height:256px;

             border:2px solid #999;

             overflow:hidden;

         }

     </style>

     <script src='jquery.min.js'></script>

 </head>

 <body>

     <div>

         <img src="dog.png" alt="">

     </div>

 </body>

 <script>

 $('img').mouseenter(function(){

     $(this).css({'transform':'scale(1.2,1.2)'});

 });

 $('img').mouseleave(function(){

     $(this).css({'transform':'scale(1,1)'});

 });

 </script>

 </html>

 $('div').click(function(){

     s=0;

     setInterval(function(){

         s+=30;

         $('div').css({'transform':'rotate('+s+'deg)'});

         m=s/30;

         if(parseInt(m%4)==0){

             $('div').css({'transform':'translate('+200+'px,'+200+'px)'});

         }else if(parseInt(m%4)==1){

             $('div').css({'transform':'translate('+0+'px,'+0+'px)'});

         }

         else if(parseInt(m%4)==2){

             $('div').css({'transform':'translate('+0+'px,'+200+'px)'});

         }

         else{

             $('div').css({'transform':'translate('+200+'px,'+0+'px)'});

         }

     },100);

 });