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

东明兄 • 2018-03-20 • 开发笔记 • 1982 阅读
chat

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秒

版权声明：
作者：东明兄
链接：https://blog.crazyming.com/note/278/
来源：CrazyMing
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
海报
CSS3实现鼠标移入时图片放大动画
CSS3的transform:scale()可以实现按比例放大或者缩小功能。 利用此特性可实现我们的需求 代码如下： <html> <head> ……
<<上一篇
下一篇>>
chat