转载自：http://blog.csdn.net/u014175572/article/details/51535768

CSS3的transform:scale()可以实现按比例放大或者缩小功能。

CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

效果如下图所示：

1、当未鼠标未放到图片上的效果：

2、当鼠标放到图片上后(放大的过程是有动画过渡的，这个过渡的时间可以自定义)：

代码如下：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             div{

                 width: 300px;

                 height: 300px;

                 border: #000 solid 1px;

                 margin: 50px auto;

                 overflow: hidden;

             }

             div img{

                 cursor: pointer;

                 transition: all 0.6s;

             }

             div img:hover{

                 transform: scale(1.4);

             }

         </style>

     </head>

     <body>

         <div>

             <img src="img/focus.png" />

         </div>

     </body>

 </html>

其中：

transition: all 0.6s;　　表示所有的属性变化在0.6s的时间段内完成。

transform: scale(1.4);　　表示在鼠标放到图片上的时候图片按比例放大1.4倍。

代码下载地址：http://download.csdn.net/detail/u014175572/9535023

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

  1. CSS3实现鼠标移动到图片上图片变大

    CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义 <!DOCTYPE html><html> <head&g ...

  2. 利用CSS3实现鼠标悬停在图片上图片缓慢缩放的两种方法

    1.改变background-size属性 将图片作为某个html元素的背景图片,用transition属性改变图片的大小. .container{ background-size: 100% 100 ...

  3. 鼠标移到图片上图片放大【css3实例】

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. WPF中当鼠标移到按钮上时，按钮的背景图片消失的问题

    如果给按钮设置了背景图片,当鼠标移到按钮上的时候,按钮就好变成一个浅蓝色的按钮,背景图片就消失了,对于这个问题有很多解决方法,我只分享一下我的解决方法. 我第一次用的方式是在按钮中添加一个图片,不用背 ...

  5. [转]jquery 鼠标放在图片上显示图片的放大镜效果jqzoom_ev-2.3

    本文转自:http://blog.csdn.net/weizengxun/article/details/6768183 鼠标放在图片上显示图片的放大镜效果使用jqzoom实现,本例版本2.3 效果图 ...

  6. 使用 jQuery 操作页面元素的方法，实现浏览大图片的效果，在页面上插入一幅小图片，当鼠标悬停到小图片上时，在小图片的右侧出现与之相对应的大图片

    查看本章节 查看作业目录 需求说明: 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片 实现思路: 在 ...

  7. 使用JavaScript 中的Math对象和勾股定理公式，计算鼠标的位置与页面图片中心点的距离，根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大，距离近时图片缩小

    查看本章节 查看作业目录 需求说明: 使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理.距离远时图片放大,距离近 ...

  8. 【html+css3】在一张jpg图片上，显示多张透明的png图片

    1.需求:在一个div布局里面放置整张jpg图片,然后在jpg图片上显示三张水平展示的透明png图片,且png外层用a标签包含菜单 2.效果图: 3.上图,底层使用蓝色jpg图片,[首页].[购物车] ...

  9. css特效-一道闪光在图片上划过

    在百度音乐 http://music.baidu.com/ 看到这么一个图片效果,当鼠标移上去的时候,会有一道闪光在图片上划过,效果挺酷炫的.于是把这个效果再实现一下:大体思想是,设计一个透明层i,s ...

随机推荐

  1. Codeforce 513A - Game

    Two players play a simple game. Each player is provided with a box with balls. First player's box co ...

  2. 判断是移动端还是PC端

    // 判断是移动端还是PC端 $http_user_agent = isset($_SERVER['HTTP_USER_AGENT']) ? strtolower($_SERVER['HTTP_USE ...

  3. How to install john deere service advisor 4.2.005 on win 10 64bit

    How to install john deere service advisor 4.2.005 with the February 2016 data base disks on a machin ...

  4. linux的错误码error

    在程序出错时,我们通过全局变量错误号errno和perror函数能够很快的定位到错误原因. Linux错误代码及其含义 C Name Value Description 含义Success 0 Suc ...

  5. window apidoc的安装和使用

    apidoc是一个轻量级的在线REST接口文档生成系统,支持多种主流语言,包括Java.C.C#.PHP和Javascript等.使用者仅需要按照要求书写相关注释,就可以生成可读性好.界面美观的在线接 ...

  6. 为什么预处理和参数化查询可以防止sql注入呢?

    在传统的写法中,sql查询语句在程序中拼接,防注入(加斜杠)是在php中处理的,然后就发语句发送到mysql中,mysql其实没有太好的办法对传进来的语句判断哪些是正常的,哪些是恶意的,所以直接查询的 ...

  7. overture里设置踏板标记

    在学习如何设置踏板标记之前,我们先来了解什么是踏板标记.踏板标记一般是使用在乐谱上,众所周知,钢琴有三个踏板,每个踏板的作用都不一样:右边的踏板称为“延音踏板”,是用来延长琴弦振动的时间,使音延长的效 ...

  8. 【Python044--魔法方法：简单定制】

    一.简单定制 基本要求: -- 定制一个计时器的类 -- start和stop代表开始计时和停止计时 -- 假设计时器对象t1,print(t1)和直接调用t1均显示结果 -- 当计时器未启动或停止计 ...

  9. ICM Technex 2018 and Codeforces Round #463 (Div. 1 + Div. 2, combined) A

    2018-02-19 A. Palindromic Supersequence time limit per test 2 seconds memory limit per test 256 mega ...

  10. ubuntu安装微软雅黑和Consolas字体

    原文:http://fooler5.iteye.com/blog/2406227 [字体下载] YaHeiConsolas.tar:http://www.mycode.net.cn/wp-conten ...