zoukankan      html  css  js  c++  java
  • CSS设置鼠标放在图片上hover的时候会按比例放大的效果

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

    <!DOCTYPE html>  
    <html>  
        <head>  
            <meta charset="UTF-8">  
            <title>hover放大效果</title>  
            <style type="text/css">  
                div{  
                     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:桌面Codejs特效images/1.jpg" style=" 200px;height: 200px">
            </div>  
        </body>  
    </html>  
    
    
  • 相关阅读:
    1.20
    1.18
    4.16python安装
    4.15Android学习
    4.14Android学习
    4.13Android学习
    4.12Android学习
    4.11Android学习
    4.10Android学习
    4.09Android学习
  • 原文地址:https://www.cnblogs.com/hanfe1/p/12609744.html
Copyright © 2011-2022 走看看