鼠标移上去，图片会自动原地放大CSS写法_CSS学习

当前位置：网站建设 > 技术支持

鼠标移上去，图片会自动原地放大CSS写法_CSS学习

资料来源：网络整理时间：2023/3/4 1:03:58 共计：3582 浏览

今天在制作一个zblog模板的时候，用上了这个图片放大特效，想到以前也没写过，就分享出来吧！

在我第一次接触这个特效的时候，以为会很复杂，至少会有几行代码才能去实现，但学习后真的精到了！

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

CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

那么，什么是鼠标移上去，图片就原地放大的效果呢？

左边这个就是原图了，右边这个是放大后的效果图，尺寸被限制后，只在原地放大，只是图片原地放大而已！

鼠标移上去图片放大特效代码：

<!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>

可以看出，先用div限制的尺寸，并用overflow: hidden;仿制超出范围！

然后设置transition的变化时间，为0.6秒，可以自行设置大小，等于变化的速度！

而transform: scale(1.4); 意思是放大1.4倍了，也是可以调整设置的！

其实就这么简单，一个触发图片放大效果就做出来了！

PS：忘了说，transition和transform最好去兼容下其它浏览器！

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：jQuery $(document).height()与$(window).height() - 判断div随滚动条滚动到一定位置后停止_js/jQuery | ·下一条：纯CSS做对联广告代码_CSS学习