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/mip/data/img/dmj/201902171550380031205409.jpg"/ class="tu"> </div> </body> </html> 
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知