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. Mvc异步

    <h3>MVC 自带的yibu请求</h3> <%-- 1.要执行的方法,2.控制器,3.Ajax操作--%> <%using (Ajax.BeginForm ...

  2. LBP 特征

    LBP(Local Binary Pattern,局部二值模式)是一种用来描述图像局部纹理特征的算子:它具有旋转不变性和灰度不变性等显著的优点.用于纹理特征提取.而且,提取的特征是图像的局部的纹理特征 ...

  3. kafka删除主题

    hdp集群默认不能删除kafka主题,如果要删除,需要在ambari上进行配置,将enable delete设置为true.

  4. Vue 导出表格为Excel

    放法有多种,我这里是直接转JSON数据为Excel. 1.既然要使用,那首先当然是安装依赖,在终端命令输入: npm install -S file-saver xlsx npm install -D ...

  5. sync---强制将被改变的内容立刻写入磁盘

    sync命令用于强制被改变的内容立刻写入磁盘,更新超块信息. 在Linux/Unix系统中,在文件或数据处理过程中一般先放到内存缓冲区中,等到适当的时候再写入磁盘,以提高系统的运行效率.sync命令则 ...

  6. CMDB学习之五服务端api

    服务端api 对发送来的数据进行处理,并返回结果,首先要创建一个Django项目 第一步,就是写URL路由在分支中写url api 主路由 from django.conf.urls import u ...

  7. Spring3 整合MyBatis3 配置多数据源 动态选择SqlSessionFactory（转）

    1. Spring整合MyBatis切换SqlSessionFactory有两种方法,第一. 继承SqlSessionDaoSupport,重写获取SqlSessionFactory的方法.第二.继承 ...

  8. 洛谷 P1105 平台

    P1105 平台 题目描述 空间中有一些平台.给出每个平台的位置,请你计算从每一个平台的边缘落下之后会落到哪一个平台上.注意,如果某两个平台的某个两边缘横坐标相同,物体从上面那个平台落下之后将不会落在 ...

  9. 程序猿果真有前端后端client吗

    前端 后端 client DBA OP 程序猿有分这么细的吗? 入行时候有区别. 殊途同归 吾道一以贯之, 假设作为程序猿不能领悟一贯, 则永远不清楚.

  10. Direct2D开发：向 MFC 项目添加 Direct2D 对象

    0X01 创建 MFC 应用程序: 在“文件”菜单上指向“新建”,然后单击“项目”. 在“新建项目”对话框左窗格的“已安装的模板”下,展开“Visual C++”,然后选择“MFC”. 在中间窗格中, ...