zoukankan      html  css  js  c++  java
  • 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 });
     
  • 相关阅读:
    Linux内核RPC请求过程
    二分图
    Java实现 蓝桥杯 算法提高 合并石子
    Java实现 蓝桥杯 算法提高 合并石子
    Java实现 蓝桥杯 算法提高 摩尔斯电码
    Java实现 蓝桥杯 算法提高 摩尔斯电码
    Java实现 蓝桥杯 算法提高 文本加密
    Java实现 蓝桥杯 算法提高 文本加密
    Java蓝桥杯 算法提高 九宫格
    Java蓝桥杯 算法提高 九宫格
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9267997.html
Copyright © 2011-2022 走看看