Hello大家好，我是Coco，今天给大家带来一个巧妙的小技巧。
本文将介绍一个非常有意思的功能，使用纯CSS利用resize实现强大的图片切换预览功能。类似于这样：
思路首先，要实现这样一个效果如果不要求可以拖拽，其实有非常多的办法。
将两张图片叠加在一起改变上层图片的宽度，或者使用mask，改变mask的透明度区间变化两种方式都简单示意一下。
假设我们的结构如下，分别使用background展示两张图片：
divclass="g-outer"divclass="g-inner"/div/div
方法一，改变上层图片的宽度的方式：
.g-outer{width:px;height:px;background-image:url(image1.png);overflow:hidden;}.g-inner{height:px;background:url(image2.png);animation:widthchange3sinfinitealternatelinear;}
keyframeswidthchange{0%{width:px;}%{width:0px;}}效果如下：
当然，使用mask遮罩的方式也非常轻松的可以实现类似的效果：
.g-outer{background-image:url(