1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

css3鼠标移入图片缩略图实现放大的方法

在现在的网页设计中,鼠标移到图片上图片放大的效果常常被用到,这个效果多应用于文章列表里。

CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。

当鼠标放到图片上后(放大的过程是有动画过渡的,这个过渡的时间可以自定义):

直接上代码演示

 <!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">  		<title></title>  		<style type="text/css">  			.tm{  				width: 300px;  				height: 400px;  				border: 2px solid darkblue;  				margin: 50px auto;  				position: relative;  				overflow: hidden;      			}  			.tm .tu{  				display: block;  				width: 300px;  				height: 400px;  				border: 1px solid darkgreen;  				position: absolute;  				bottom: 0;  				left: 0;  				transition: all 0.6s;  			}  			.tm:hover .tu{  				transform: scale(1.05);    			}  		</style>  		<script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script>  		<!--<script type="text/javascript">  			$(function(){  			$('.tm').hover(function(){  				$('.tm .tu').animate({'padding-top':'-5px','padding-bottom':'-5px'},600);  			},function(){  				  			})	  			})  			  		</script>-->  	</head>  	<body>  		<div class="tm">  			<img src="https://www.qiquanji.com/data/img/dmj/201902171550380031205409.jpg"/ class="tu">  		</div>  	</body>  </html>

原文链接:https://www.qiquanji.com/post/7604.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: