鼠标移动到图片上图片逐渐变大、变清晰（带有过渡效果）

曾经终败给现在 2022-06-12 10:52 273阅读 0赞

<!DOCTYPE html>  
    <html>  
        <head>  
            <meta charset="UTF-8">  
            <title>鼠标移动到图片上图片逐渐变大、变清晰（带有过渡效果）</title>  
            <style type="text/css">  
                div{  
                    width: 300px;  
                    height: 300px;
                    margin: 50px auto;  
                    overflow: hidden;  
                    filter:alpha(Opacity=50);
                    -moz-opacity:0.5;
                    opacity: 0.5;
                }  
                div img{  
                    cursor: pointer;  
                    transition: all 0.6s;  
                    -moz-transition: all 0.6s;  /* 0.6s完成过渡效果 */
                    -webkit-transition: all 0.6s;  
                }  
                div img:hover{  
                    transform: scale(1.2);  /* 放大1.2倍 */
                }  
                div:hover{
                    filter:alpha(Opacity=100);
                    -moz-opacity:1;
                    opacity: 1;
                }
            </style>  
        </head>  
        <body>  
            <div>  
                <img title="鼠标移上来，我变清晰了，逐渐变大了" src="http://new-img2.ol-img.com/375x375/115/638/liZVVgjbgJHDs.jpg" />  
            </div>  
        </body>  
    </html>

效果截图:

默认时：

![Center][]

鼠标移上去时:

![Center 1][]

[Center]: /images/20220612/0438ab9f098448c5a1481e698ceadfa8.png
[Center 1]: /images/20220612/7d6a088cf6a24f598a11969b62ea5e20.png