通过css实现图片过渡放大的效果_transition 放大-CSDN博客

本文链接：https://blog.csdn.net/mhh2000/article/details/105163358

通过css实现图片放大效果

css3当中有一个是过渡属性是transition，他要配和scale来使用，transition:scale(),这个括号里面填写数字，如果大于1，就是放大，如果小于1，就是缩小。
为了实现从一种效果变成一种效果，可以不用flash或者js，transition能够在鼠标单击，离开时，发生css属性值得改变，所以放大效果使用transition很不错！！！！

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <style type="text/css">  
            div{  
                width: 300px;  
                height: 300px;  
                border: deepskyblue solid 1px;  
                border-radius: 150px;/*显示圆角边框*/
                margin: 50px auto;  
                overflow: hidden; /*隐藏多余溢出部分*/ 
            }  
            div img{ 
            	transition: all 0.6s;  /*所有的属性在0.6秒之内完成改变*/
                cursor: pointer;  /*s鼠标移上去，变成一个小手的图标，这样比较美观*/
            }  
           div img:hover{  
           		transform: scale(1.6);/*这个是根据图片比例放大到图片的1.6倍*/
                /*transform: scale(0.6);同理，这个缩小0.6倍*/  
            }  
        </style>  
    </head>  
    <body>  
        <div>  
            <img width="300px" src="img/哆啦A梦.jpg" />  
        </div>  
    </body>  
</html>