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; ...

鼠标放上去图片放大

鼠标放上去图片放大 Document bod

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

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

通过 css3 实现鼠标划过图片移动

.find_item_img:hover{transform: translateX(-5px);} .find_item_img{transition: transform .4s ease-out...

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

CSS实现图片方法缩小

CSS3变形和动画:旋转、扭曲、缩放、位移、矩阵 、原点 transform-origin、过渡属性 transition-property、过渡所需时间 transition-duration...

旋转、扭曲、缩放、位移、矩阵 、原点 transform-origin、过渡属性 transition-property、过渡所需时间 transition-duration、过渡函数 transit...

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

用CSS3对图片放大效果 .right_div .topicons li a:hover img{     -webkit-transform:scale(1.5,1.5);     -mo...

CSS3 - 鼠标经过图片缓慢放大、鼠标离开缓慢还原

在线演示鼠标经过或悬停时,图片会缓慢放大;鼠标离开,图片缓慢还原。 下图分别为:原图、鼠标经过代码: div...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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