转载自：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. ogg 12.3 中 format release的变化

    Non-CDB databases with compatibility set to 12.1, FORMAT RELEASE 12.2 or above is supported. Non-CDB ...

  2. 使用Holer将本地端口映射到公网

    What is holer Holerexposes local servers behind NATs and firewalls to the public internet over secur ...

  3. Kattis之旅——Inverse Factorial

    题目意思就是已知n的阶乘,求n. 当输入的阶乘小于10位数的时候,我们可以用long long将字符串转化成数字,直接计算. 而当输入的阶乘很大的时候,我们就可以利用位数去大概的估计n. //Asim ...

  4. Spring Boot（一）：入门篇

    Spring Boot(一):入门篇 一.Spring Boot介绍 Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程. 该框架 ...

  5. gcc常用编译选项

    “-Wall”选项打开所有最常用到的编译警告,强烈建议打开,可以捕捉到许多在C编程中最常发生的错误. “-o”选项来为可执行文件指定一个不同的输出文件. “-c”用于把源码文件编译成对象文件. 对象文 ...

  6. 批量telnet端口通不通

    每读一行就运行一次telnet IP port #!/bin/bash port="22" cat *.txt | while read line do telnet ${line ...

  7. linux设置代理

    在~/.bashrc或者/etc/profile下,添加下面 http_proxy=http://192.168.105.171:80 https_proxy=$http_proxy export h ...

  8. UI自动化（二）css选择器

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

  9. 动态规划之97 Interleaving String

    题目链接:https://leetcode-cn.com/problems/interleaving-string/description/ 参考链接:https://blog.csdn.net/u0 ...

  10. Python3基础 filter+lambda 筛选出1-20之间的奇数

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...