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. Codefroces Educational Round 26 837 D. Round Subset

    D. Round Subset time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...

  2. IntelliJ IDEA 中如何配置多个jdk版本即(1.7和1.8两个jdk都可用)

    IntelliJ IDEA使用教程 (总目录篇) 有时候需要看Java源码,但是 Java 1.7 和 Java 1.8的差别的关系,有时候你想查看不同jdk版本的Java源码. 或者你的项目需要测试 ...

  3. 洛谷 P1801 黑匣子_NOI导刊2010提高（06）（未完）

    P1801 黑匣子_NOI导刊2010提高(06) 题目描述 Black Box是一种原始的数据库.它可以储存一个整数数组,还有一个特别的变量i.最开始的时候Black Box是空的．而i等于0.这个 ...

  4. actionBar-进入界面闪烁问题解决

    问题分析: 主要是因为在开启一个应用的时候,当前界面并不是第一界面,在它之前,还有一个界面启动了,这个界面的唯一目的就是启动主界面,它目的不是显示.虽然如此,但是呢,这个界面的theme因为没有做统一 ...

  5. JS 图片大小自动调整 (img)

    <script> function dlutChangeImg(){ var maxwidth = 598; var obj = document.getElementById('bbs_ ...

  6. gplaycli—— 用于从 GooglePlayStore 中下载和管理 Apk 文件的命令行工具

    gplaycli-- 用于从 GooglePlayStore 中下载和管理 Apk 文件的命令行工具 这个 GooglePlay市场 中 https://play.google.com/store/a ...

  7. 字串乱序 PHP&JS

    <?php /** * 字串乱序 PHP&JS * * php 中把字串乱序后输出给客户机的 JAVASCRIPT , JAVASCRIPT 中恢复 * 在指定长度提取一个字符,并把这一 ...

  8. Android中实现整个视图切换的左右滑动效果

    Android中提供了一个Gallary,可以实现图片或者文本的左右滑动效果. 如何让整个视图都能实现左右滑动,达到类似于Gallary的效果呢?可以直接用一个开源的ViewFlow来实现.   项目 ...

  9. 1.3 Quick Start中 Step 1: Download the code官网剖析（博主推荐）

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ 不要局限于,这个版本,我只是以最新的版本,来做个引子,让大家对官网的各个kafka版 ...

  10. JS防止全局变量污染解决方案

    1.目前出现的问题: a.随意使用全局变量,会存在冲突的风险和难以解决的问题. b.现有JS代码共享流程中的状态,参数,都是通过按钮传递,非常别扭,不易于管理. c.通过完成后的代码很难知晓业务流程, ...