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

时间：5年前阅读：6468

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

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,我们将及时处理。

微信扫码关注

更新实时通知

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

网友评论