CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)

原创 2016年05月30日 10:05:59

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

css实现鼠标悬停图片放大显示

* { margin: 0; padding: 0; font-family: "微软雅黑"; } .avatar { display: block; ...

图片在鼠标滑过的时候就放大,鼠标移开就恢复

外层容器设置宽高,超过的部分就隐藏。 a{        width: 250px;     height: 160px;     overflow: hidden;     bord...

鼠标移入背景图片放大(还原)

我拷贝的代码位置;搬过来的希望能帮到大家

鼠标经过,图片会放大(从中心位置放大)

js部分:  //鼠标经过a标签,对应的图片会放大效果         var zoom = 1.03;         var width = $(this).find(".move_...

鼠标放上去图片放大

鼠标放上去图片放大 Document bod

CSS实现图片放大缩小的几种方法

CSS实现图片方法缩小

用CSS3实现对图片的放大效果

用CSS3对图片放大效果 .right_div .topicons li a:hover img{     -webkit-transform:scale(1.5,1.5);     -mo...
  • mixiuali
  • mixiuali
  • 2013年09月24日 19:33
  • 34925

jq/css鼠标经过图片放大效果

img{display:block;} .box{width:200px;border:solid 2px gray;height:160px;overflow:hidden;} .box i...

鼠标悬停图片放大提示效果

用CSS实现鼠标悬停图片放大的效果

使用CSS制作鼠标悬停放大
  • sugarf
  • sugarf
  • 2016年09月06日 06:16
  • 751
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)
举报原因:
原因补充:

(最多只允许输入30个字)