使用CSS3的属性轻松实现图片拉近过渡效果

这个问题其实我想了很久，包括我的博客其实实现都不是用这个方法的，甚至我之前还想着是不是应该用动画，然后给他几帧，后来仔细研究了一下，终于找到了一个还不错的解决方法 也就是使用css3的transition过渡属性实现。 话不多说，先看看效果。相信很多人肯定在其他地方也看见过类似的样式。

CSS3 transition 属性

之前学习的时候其实根本没注意这个属性是干嘛的，很多网站的教程都举例说能把表格从100px变成300px或者一些类似的，实在是想不出什么场景下会有这样的需求。 最近逛很多网站的时候发现别人的网站的一些图片在鼠标移动上去的时候会出现一个很漂亮的效果，就是图片会拉近，其实这个就很好理解。所以我理解的transition 过渡就是让我们选择的区域可以从一个形状变成另外一个形状

这个属性有4个属性，不过实现图片拉近的过渡效果，没有那么麻烦，所以不需要折腾那么多。

CSS3 transform 属性

这个属性到是比较简单，就是将选择的元素进行一些2D转换，说人话就是可以让元素 旋转、缩放、移动等等，所以如果大家留意的话，很多页面现在已经大大减少了对一些形状图片的需求了，比如一个放大镜，就可以通过圆和一个横横杠组合拼凑出来。

这个属性其实还比较复杂，能做的东西也很多，不过我就用了scale这个属性，也就是2D缩放。

直接上代码

        <style>
            .row {
                overflow: hidden;
            }
            div img {
                cursor: pointer;
                transition: all 0.6s;
            }

            div img:hover {
                transform: scale(1.4);
            }
        </style>

        <div class="container">
            <div class="row my-5">
                <img src="https://www.wuyabala.com/static/img/logo.jpg" alt="">
            </div>
        </div>

html的太简单了，没有什么好解释的，CSS这里除了上面说的，还用了溢出隐藏 overflow:hidden 和鼠标移动到图片上，让他变成一个手的形状cursor:pointer就没了。