CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）

最新推荐文章于 2023-03-13 14:26:40 发布

lowers_sunshine

最新推荐文章于 2023-03-13 14:26:40 发布

阅读量1.2k

点赞数 1

文章标签：图片

    <!DOCTYPE html>  
    <html>  
        <head>  
            <meta charset="UTF-8">  
            <title></title>  
            <style type="text/css">  
                div{  
                    width: 300px;  
                    height: 300px;  
                    border: #000 solid 1px;  
                    margin: 50px auto;  
                    overflow: hidden;  
                }  
                div img{  
                    cursor: pointer;  
                    transition: all 0.6s;  
                }  
                div img:hover{  
                    transform: scale(1.4);  
                }  
            </style>  
        </head>  
        <body>  
            <div>  
                <img src="img/focus.png" />  
            </div>  
        </body>  
    </html> 


transition: all 0.6s;表示所有的属性变化在0.6s的时间段内完成。

transform: scale(1.4);表示在鼠标放到图片上的时候图片按比例放大1.4倍。


代码下载地址：http://download.csdn.net/detail/u014175572/9535023

lowers_sunshine

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）

> html> head> meta charset="UTF-8"> title>title> style type="text/css"> div{ width: 300px; height: 300px;
复制链接

扫一扫