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. 【转】BAT取当前日期的前一天

    ============================取前一天的日期       OK============================@echo off ::前一天的日期,格式化输出echo ...

  2. HDU 2017 Multi-University Training Contest - Team 4 1009 1011

    Questionnaire Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 524288/524288 K (Java/Others)T ...

  3. 【例题 8-11 UVA-10954】Add All

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 就是合并果子.. 每次都合并最小的就可以啦. 别忘了初始化 [代码] /* 1.Shoud it use long long ? 2 ...

  4. POJ 4047 Garden

    Garden Time Limit: 1000ms Memory Limit: 65536KB This problem will be judged on PKU. Original ID: 404 ...

  5. hdu 1863 畅通project kruskal || prim

    简单最小生成树,畅通project.这三道题目都是练习最小生成树的. 注意一下推断是否有通路时,kruskal能够推断每一个点的祖先是否同样.prim能够推断每一个点是否都加进集合里面了,也就是说是否 ...

  6. Qt之界面换肤

    简述 常用的软件基本都有换肤功能,例如:QQ.360.迅雷等.换肤其实很简单,并没有想象中那么难,利用前面分享过的QSS系列文章,沃我们完全可以实现各种样式的定制! 简述 实现原理 效果 新建QSS文 ...

  7. 31.Node.js 常用工具 util

    转自:http://www.runoob.com/nodejs/nodejs-module-system.html util 是一个Node.js 核心模块,提供常用函数的集合,用于弥补核心JavaS ...

  8. 44.delete用法

    声明+delete:函数禁止使用.可以使一个类禁止释放

  9. 在 Swift 專案中使用 Javascript:編寫一個將 Markdown 轉為 HTML 的編輯器

    原文:Using JavaScript in Swift Projects: Building a Markdown to HTML Editor 作者:GABRIEL THEODOROPOULOS ...

  10. PHP盛宴——经常使用函数集锦

    近期写了蛮多PHP,也接触到挺多经常使用的函数,大多都记了笔记,发个博客出来.共同学习.事实上感觉学习一门语言,语法逻辑是软素养.而对语言的熟悉程度仅仅能随着使用时间的增长而慢慢增长,当对一门语言的函 ...