前言

一霎眼又到周末。今天的案例经常有见过。今日前端早读课文章由

SbCoco授权分享。由公号：iCSS前端趣闻授权。

正文从这开始~~

本文将介绍一个非常有意思的功能，使用纯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(



转载请注明地址:http://www.jingucaoa.com/jgcrybw/9539.html