HTML+CSS实现前后对比效果

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情

前言

今天我们用HTML和CSS制作一个前后的效果。

实现原理很简单：

• 利用伪元素设置两张背景图片。
• 在 * :after 伪元素中利用 clip-path 裁剪方式设置可显示区域。
• 最后用 CSS 变量 和 input range 滑块控件和 oninput 事件设置 CSS 变量即可。

技术支持：

引用到的HTML标签有：

• input range

引用到的CSS属性有：

• clip-path

• var()
• appearance
• calc()

引用到的CSS伪类有：

• input[type='range']::-webkit-slider-thumb MDN

实现

HTML代码如下：

<div class="contrast" style="--liner: 10%">
  <input
     type="range"
     class="range"
     min="1"
     value="10"
     oninput="this.parentNode.style = `--liner:${this.value}%`"
   >
</div>

CSS代码如下：

html,body{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
:root{
  --height: 25vw;
}
.contrast{
  width: 40vw;
  height: var(--height);
  position: relative;
}
.contrast::after,
.contrast::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp3.itc.cn%2Fimages01%2F20200929%2F188fed59a07d471f811af1c99de64ee2.jpeg&refer=http%3A%2F%2Fp3.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651840595&t=ef06f1492ede2b907cc9f02ad076b0a5');
  background-size: cover;
  

}
.contrast::before{
  background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201806%2F12%2F20180612164256_qylvv.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651842155&t=2a2980ddb0274e3494e7f3d082b7cb7e');
}
.contrast::after{
  clip-path: inset(0 0 0  var(--liner));
}
.range{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  -moz-appearance:none; /* Firefox */
  -webkit-appearance:none; /* Safari and Chrome */
  appearance: none;
  outline: none;
  background: transparent;
  z-index: 99;
}
.range::-webkit-slider-thumb{
  -moz-appearance:none; /* Firefox */
  -webkit-appearance:none; /* Safari and Chrome */
  appearance: none;
  width: 0.729vw;
  height: var(--height);
  background: #000;
  box-shadow: 0 0 5px rgba(0, 0, 0, .5);
  border-radius: 2px;
  cursor: ew-resize;
}
.range::-webkit-slider-thumb:hover{
  box-shadow: 0 0 5px rgba(0, 0, 0, .5);
}

实现效果如下：

现在前后对比的效果就完成了。

但是有没有觉得，拖拽 range 时有一些明显的卡顿现象，这是因为 range 预设值间距不够大的原因，也就是 min 和 max 的差值不够大（粒度不够细）。

在HTML中稍微修改一下代码：

<div class="contrast" style="--liner: 100%">
    <input
        type="range"
        class="mask"
        min="1"
        max="1000"
        value="100"
        oninput="this.parentNode.style = `--liner:${this.value}%`"
    >
</div>

同理 CSS中也要修改一下：

.contrast::after{
    clip-path: inset(0 0 0  calc(var(--liner) / 10));
}

看一下最终的完成效果：

好像也没啥变化，可能是GIF录制软件的原因😱 ~~

👉 源代码 CodePen 链接。

总结

以上就是本次分享的全部内容~~

如果觉得文章写得不错，对你有所启发的，请不要吝啬 点个 赞 和 关注 并在 评论区 留下你宝贵的意见哦~~😃