共计 3552 个字符，预计需要花费 9 分钟才能阅读完成。
本文将介绍一个十分有意思的性能，应用纯 CSS 利用 resize 实现弱小的图片切换预览性能。相似于这样：
思路
首先，要实现这样一个成果如果不要求能够拖拽，其实有十分多的方法。
- 将两张图片叠加在一起
- 扭转下层图片的宽度，或者应用 mask，扭转 mask 的透明度区间变动
两种形式都简略示意一下。
假如咱们的构造如下，别离应用 background 展现两张图片：
<div class="g-outer">
<div class="g-inner"></div>
</div>办法一，扭转下层图片的宽度的形式：
.g-outer {
width: 650px;
height: 340px;
background-image: url(image1.png);
overflow: hidden;
}
.g-inner {
height: 340px;
background: url(image2.png);
animation: widthchange 3s infinite alternate linear;
}
.mask-change {mask: linear-gradient(90deg, #fff 0%, #fff 50%, transparent 50%, transparent 100%);
mask-size: 200% 100%;
animation: maskChange 3s infinite alternate linear;
}
@keyframes widthchange {
0% {width: 650px;}
100% {width: 0px;}
}成果如下：
当然，应用 mask 遮罩的形式也十分轻松的能够实现相似的成果：
.g-outer {background-image: url(https://images.cnblogs.com/cnblogs_com/coco1s/881614/o_21081614180122.png);
}
.g-inner {background: url(https://images.cnblogs.com/cnblogs_com/coco1s/881614/o_21081614175811.png);
mask: linear-gradient(90deg, #fff 0%, #fff 50%, transparent 50%, transparent 100%);
mask-size: 200% 100%;
animation: maskChange 2s infinite alternate linear;
}
@keyframes maskChange {
0% {mask-position: -100% 0;}
100% {mask-position: 0 0;}
}也能够失去同样的成果：
上述 DEMO 的残缺代码：CodePen Demo — Switch Picture
对弱小的 mask 属性还不是太理解的，能够猛戳：微妙的 CSS MASK
应用 resize 实现拖拽性能
下一步则是最外围，最要害的一步，奇妙的应用 CSS resize 属性，实现拖拽管制元素的宽度。
什么是 resize？
resize：该属性容许你管制一个元素的大小
语法如下：
{
/* Keyword values */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;
}看一个最简略的 DEMO：
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aut qui labore rerum placeat similique hic consequatur tempore doloribus aliquid alias, nobis voluptates. Perferendis, voluptate placeat esse soluta deleniti id!</p>p {
width: 200px;
height: 200px;
resize: horizontal;
overflow: scroll;
} 这里，咱们设置了一个长宽为 200px 的 <p> 为横向可拖拽扭转宽度。成果如下：
简略总结一些小技巧：
resize的失效，须要配合overflow: scroll- 咱们能够通过
resize的horizontal、vertical、both来设置横向拖动、纵向拖动、横向纵向皆可拖动。 - 能够配合容器的
max-width、min-width、max-height、min-height限度可拖拽扭转的一个范畴
将 resize 使用于图片拖拽切换
OK，接下来，咱们将 resize 使用于图片拖拽切换。
首先，还是上述的代码，咱们将 resize 作用于子元素试试：
<div class="g-outer">
<div class="g-inner width-change"></div>
</div>.g-outer {
width: 650px;
height: 340px;
background-image: url(image1.png);
overflow: hidden;
}
.g-inner {
height: 340px;
background: url(image2.png);
resize: horizontal;
overflow: scroll;
max-width: 640px;
min-width: 10px;
} 能够看到，g-inner 设置了 resize: horizontal，将容许被横向拖动，理论的成果如下：
嗯，十分靠近了，因为须要配合 overflow: scroll，所以呈现了宜人的滚动条，十分的不美观，咱们得想方法干掉滚动条。
借助多一层嵌套及相对定位实现暗藏滚动条
暗藏滚动条的形式有很多，这里咱们介绍其中一种奇妙的形式，咱们对咱们的构造进行一下革新，再叠加多一层 div：
<div class="g-outer">
<div class="g-inner">
<div class="g-resize"></div>
</div>
</div> 咱们将管制拖拽这个性能交给 g-resize，它负责扭转元素的宽度，而 g-inner 改为相对定位，当 g-resize 的宽度增大时，其父元素 g-inner 也会随之增大，最初设置 g-resize 的 opacity 为 0 即可暗藏滚动条。
外围代码如下：
.g-outer {
position: relative;
width: 650px;
height: 340px;
background-image: url(image1.png);
overflow: hidden;
}
.g-inner {
position: absolute;
top: 0;
left: 0;
min-width: 0;
max-width: 650px;
height: 340px;
background-image: url(image2.png);
}
.g-resize {
position: relative;
resize: horizontal;
overflow: scroll;
width: 0;
height: 340px;
max-width: 650px;
min-width: 15px;
animation: opacityChange 3s infinite alternate linear;
}
@keyframes opacityChange {
0% {opacity: 0;}
100% {opacity: 1;}
} 这里，为了不便示意，我将 opacity 设置了一个渐隐渐现的动画成果，不便示意：
借助伪元素，显示拖拽条
最初一步，因为齐全暗藏了滚动条，用户也就不晓得能够拖拽了，所以咱们还须要绘制一个更为难看的拖拽条，这里连续上述的布局，给 .g-inner 再增加一个伪元素，相对定位在元素最初即可：
.g-inner:before {
content: "↔";
position: absolute;
background: rgba(0, 0, 0, 0.5);
top: 0;
right: 0;
height: 100%;
line-height: 340px;
}最终完满达成成果：
残缺具体的代码，你能够在我的 CSS 灵感上看到：
CSS 灵感 — 利用 resize 实现图片切换预览性能
总结一下
通过本文，你能够学会：
- 利用 resize 来实现容器大小的管制
- 通过一些奇妙的形式来暗藏不太好看的滚动条
- 以及配合上述的一些技巧，应用纯 CSS 实现图片拖拽切换预览性能
最初
好了，本文到此结束，心愿对你有帮忙 :)
想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄
更多精彩 CSS 成果能够关注我的 CSS 灵感
更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。
如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。
