本文將介紹一個非常有意思的功能，使用純 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;
}
@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，當然，准確的說法是，overflow不是visible，或者可以直接作用於替換元素譬如圖像、<video>及<iframe>、<textarea>等- 我們可以通過
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 實現圖片拖拽切換預覽功能
最后
好了，本文到此結束，希望對你有幫助 😃
更多精彩 CSS 效果可以關注我的 CSS 靈感
更多精彩 CSS 技術文章匯總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。
如果還有什么疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。