转载自：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. 费马小定理与GCD&LCM

    若 t = 1 ,  a ^ ( p - 2 ) 为 a 在取模 p 意义下的乘法逆元 通常用 inv 表示 证明: b * a =(三等)1(mod p) a ^ ( p - 2 ) * a =(三 ...

  2. 在centos上搭建Git服务器

    第一步:先安装一些相关依赖库和编译工具 yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel yum in ...

  3. 处理jquery的ajax请求session过期跳转到登录页面

    首先需要在拦截器中判断是否是ajax请求,如果是 if(isAjaxRequest(request)){//ajax请求 response.setHeader("sessionstatus& ...

  4. MySQL字符类型datetime与timestamp

    这片博客来详细分区一下这哥俩! 首先来说明这两个字符类型: DATETIME 8 1000-01-01 00:00:00 ~9999~12-31 23:59:59 0000-00-00 00:00:0 ...

  5. Docker学习笔记之在开发环境中使用服务发现

    0x00 概述 服务发现应用是很多服务化系统的组成部分,所以在开发.测试环境中也就有必要配备一套服务发现体系来配合我们的开发.测试工作.在这一小节里,我们就来谈谈如何在 Docker 环境下部署服务发 ...

  6. Golang面向对象_继承

    package main import "fmt" type Person struct { name string //名字 sex byte //性别 age int //年龄 ...

  7. HTML5<input>标签

    在表单中最为核心的就是<input>标签,使用<input>标签可以在表单中定义文本输入框.单选按钮.复选框.重置按钮等,其基本语法格式如下: <input type=& ...

  8. ssh-keygen 命令

    功能 生成.管理和转换认证密钥,包括 RSA 和 DSA 两种密钥,密钥类型可以用 -t 选项指定.如果没有指定则默认生成用于SSH-2的RSA密钥,系统管理员还可以用它产生主机密钥. 通常,这个程序 ...

  9. 20145308 《网络对抗》 MSF基础应用 学习总结

    20145308 <网络对抗> MSF基础应用 学习总结 实验内容 掌握metasploit的基本应用方式,掌握常用的三种攻击方式的思路.具体需要完成(1)一个主动攻击,如ms08_067 ...

  10. OpenJudge cdqz/Data Structure Challenge 2 (Problem 5822) - 可持久化线段树

    描述 给一个空数列,有M次操作,每次操作是以下三种之一: (1)在数列后加一个数 (2)求数列中某位置的值 (3)撤销掉最后进行的若干次操作(1和3) 输入 第一行一个正整数M. 接下来M行,每行开头 ...