转载自：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. Hadoop HA方案调研

    原文成文于去年(2012.7.30),已然过去了一年,很多信息也许已经过时,不保证正确,与Hadoop学习笔记系列一样仅为留做提醒. ----- 针对现有的所有Hadoop HA方案进行调研,以时间为 ...

  2. 每日linux命令学习-head命令和tail命令

    本节主要学习了linux文件浏览的相关命令,包括cat.less.more.read.tail等,由于本人经常使用cat.less.more命令,已经较为熟悉,所以本节重点学习head命令和tail命 ...

  3. Caused by: java.net.BindException: Address already in use: bind

    org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'brandService ...

  4. selenium:2.selenium 键盘事件模拟

    今晚不想加班,于是赶紧回来看看书,不知道今天怎么就突然特别想玩文明五,但是又要克制自己咯,所以还是看看书吧,干的事情有: 1.下了selenium的小工具:FireBug/FirePath. 2.确定 ...

  5. kswapd0 进程CPU占用过高

    前几天遇到的一个问题,自己本地用VM配置的虚拟机,一般会top查看进程以及CPU占用的一些情况.又一次用laravel 打印对象,里面的内容比较多,浏览器当时就卡了. 然后看进程的情况.我以为会是ng ...

  6. 登陆 全站 user

    TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [os.path.join( ...

  7. mysql5.5被django抛弃,安装mysql5.7记录

    安装: https://www.jb51.net/article/123004.htm 问题解决: https://blog.csdn.net/zztingfeng/article/details/8 ...

  8. percona-server-5.7.18-14安装

    说明 percona-server-5.7 的安装对硬件配置的要求较高,至少需要4G内存或者2G物理内存+2Gswap. 编译安装过程中注意所在分区的空间大小,编译安装需要使用到大量的临时空间. 环境 ...

  9. php 腾讯云 对象存储V5版本 获取返回的上传文件的链接方法

    腾讯云 对象存储V5版本 文档地址:https://github.com/tencentyun/cos-php-sdk-v5 调用简单文件上传方法: 返回数据如下 Array ( [data:prot ...

  10. 统计py文件中的代码行

    希望是输入一个合法的文件夹的路径,然后代码自动读取该文件夹下的每个py结尾的文件内的代码行数,最后汇总一个数,但现在只是有思路,却没时间写,这是能读取同级文件下的某个文件, with open('te ...