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、代码

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

 });
 

css3-12 transform:scale(1.2,1.2)实现移入元素变大特效的更多相关文章

  1. CSS3中transform属性的用法

    有时候网站也要愚弄一下访客,比如愚人节.下面我给大家推荐个效果,就是整个页面左右颠倒了.css3 很强大,简单的几行代码就可以帮我们实现这个效果. view source   print? 01 &l ...

  2. 小tips: zoom和transform:scale的区别

    小tips: zoom和transform:scale的区别 转自 张鑫旭 前端大神 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://w ...

  3. CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）

    转载自:http://blog.csdn.net/u014175572/article/details/51535768 CSS3的transform:scale()可以实现按比例放大或者缩小功能. ...

  4. CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

  5. CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）（转载）

    在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形处理,本文将对此做详细介绍. 一.旋转 rotate 用法:transform: rotate(45 ...

  6. css3的transform变换scale和translate等影响jQuery的position().top和offset().top

    css3的transform变换scale和translate等影响jQuery的position().top和offset().top

  7. css3 transform:scale(x)实现字体的缩放：

    css3 transform:scale(x)字体的缩放: transform:scale(x),针对于整体的缩放,缩放的整体包括宽,高,背景.这自然对于内联元素就无法使用此属性,最好使用无属性的sp ...

  8. zoom和transform:scale的区别

    小tips: zoom和transform:scale的区别 这篇文章发布于 2015年11月3日,星期二,00:52,归类于 css相关. 阅读 7876 次, 今日 8 次 by zhangxin ...

  9. css中zoom和transform:scale的区别

    css中zoom和transform:scale的区别 关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inline-block时,发现里面提到了zoom.下 ...

随机推荐

  1. nodejs学习（三）--express连接mysql数据库，mysql查询封装

    一.说一下 连接不同的数据库需要安装相应的插件,此demo使用mysql数据库,需自行安装mysql数据库软件. 新建数据库webapp, 新建表users: 二.直接开码 npm install m ...

  2. 【习题 8-11 UVA - 1615】Highway

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 每个村庄都有一个范围[li..ri] 只要在这个范围内放点都可以"支配"这个村庄. 则问题就等价于线段上有n个区 ...

  3. oracle取随机结果测试

    http://www.2cto.com/database/201307/227524.html

  4. poj3244(公式题)

    Difference between Triplets Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 2476   Acce ...

  5. Git管理软件

    软件下载地址 首先下载库 https://code.google.com/p/msysgit/ 接着安装 https://code.google.com/p/tortoisegit/ 然后就能够用了

  6. Android app : use html or native?

    Android app可分为两种:网络(html)应用程序和原生(native)应用程序 首先,我们先来讨论下如何判断一个app是html实现还是native实现. 设置-->>开发者选项 ...

  7. [ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.0:compile (default-compile) 问题解决

    问题描述详情: 无论你的问题是3.0还是3.1还是任何一个版本,则都可以通过以下版本来解决 解决办法: 把默认的Internal JRE改成了JAVA_HOME. 运行后成功了,截图如下:

  8. 关于编译com工程的一些体会

    作者:朱金灿 来源:http://blog.csdn.net/clever101 今天发现com的编译的一个重要一步是微软提供的midl工具将其中的idl文件生成一个头文件.c文件(即IID文件)和代 ...

  9. vue中watch函数的用法

    vue中watch函数: 不仅可以判断路由变化(上篇博客有介绍),还可以判断数据的变化 (1):首先写watch函数 (2):在data里定义值 (3):在methods里写方法 (4):使用值

  10. Java经典23种设计模式之行为型模式(二)

    本文接着介绍行为型模式里的解释器模式.迭代器模式.中介者模式. 一.解释器模式Interpret 给定一个语言,定义它的文法的一种表示,并定义一个解释器,这个解释器使用该表示来解释语言的中的句子. 1 ...