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
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。
评论