码迷,mamicode.com
首页 > Web开发 > 详细

CSS设置鼠标放在图片上hover的时候会按比例放大的效果

时间:2020-04-01 00:32:37      阅读:96      评论:0      收藏:0      [点我收藏+]

标签:div   jpg   属性   css3   ansi   poi   src   scale   html   

图片hover之后等比例放大,鼠标移开又等比例恢复原状,同时带有动画过渡效果
使用CSS3中的transform属性;

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title>hover放大效果</title>  
        <style type="text/css">  
            div{  
                width: 900px;  
                height: 600px;  
                border: 1px solid #000;  
                margin: 50px auto;  
                overflow: hidden;  
                border-radius: 5px;
            }  
            div img{  
                cursor: pointer;  
                transition: all 0.5s; /* 所有的属性变化在0.5s的时间段内完成 */
            }  
            div img:hover{  
                transform: scale(1.5); /* 鼠标放到图片上的时候图片按比例放大1.5倍   */
            }  
        </style>  
    </head>  
    <body>  
        <div>  
			<img src="D:\桌面\Code\js特效\images/1.jpg" style="width: 200px;height: 200px">
        </div>  
    </body>  
</html>  

CSS设置鼠标放在图片上hover的时候会按比例放大的效果

标签:div   jpg   属性   css3   ansi   poi   src   scale   html   

原文地址:https://www.cnblogs.com/hanfe1/p/12609744.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!