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

最新推荐文章于 2024-05-31 10:46:10 发布

weixin_34405925

最新推荐文章于 2024-05-31 10:46:10 发布

阅读量2.5k

点赞数 1

文章标签： java

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

weixin_34405925

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3-12 transform:scale(1.2,1.2)实现移入元素变大特效

css3-12 transform:scale(1.2,1.2)实现移入元素变大特效一、总结一句话总结：transform:scale(1.2,1.2)鼠标移入的时候变大一点点，超出边框的部分隐藏掉。 1、如何设计出好看的动态效果？去别人网站参考记得把功能写成函数 2、一般放大特效中多余的部分被怎么样了？一般都是被影藏了，尤其是有边框的时候，多余部分隐...
复制链接

扫一扫