微信扫一扫打赏支持

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

 

 

 
posted @ 2018-07-05 14:05  范仁义  阅读(5711)  评论(0)    收藏  举报