CSS3实现鼠标移入时图片放大动画

Daming 2018-03-20
0条评论 805 次浏览
Daming 2018-03-200条评论 805 次浏览

CSS3的transform:scale()可以实现按比例放大或者缩小功能。

利用此特性可实现我们的需求

代码如下:

<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <style type="text/css">  
            div{  
                width: 200px;  
                height: 200px;  
                border: red solid 1px;  
                margin: 50px auto;  
                overflow: hidden;  
            }  
            div img{  
                cursor: pointer;  
                transition: all 0.3s;  
            }  
            div img:hover{  
                transform: scale(1.2);  
            }  
        </style>  
    </head>  
    <body>  
        <div>  
            <img src="img/demo.png" />  
        </div>  
    </body>  
</html> 
transition: all 0.3s; 表示该元素所有属性的变化的总时间是0.3秒

0

发表评论

电子邮件地址不会被公开。