div+css实现多张图片饱和度拖拽对比比较效果代码-html代码-BFW代码库

代码语言：html

所属分类：拖放

代码描述：div+css实现多张图片饱和度拖拽对比比较效果代码，点击底部圆点切换照片。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
@charset "UTF-8";
/* ====== IMPORTS ====== */
@import url("https://fonts.googleapis.com/css2?family=Handlee&display=swap");
/* ====== GENERIC ELEMENTS/ COMPONENTS ====== */
* {
  /* silly little reset */
  margin: 0;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
}

body, main, section, figure, form {
  display: grid;
}

body {
  grid-template-rows: 100%;
  overflow-x: hidden;
  min-height: 100vh;
  background: #212121;
  color: #ededed;
  font: 400 clamp(.75em, 3.5vw, 1.5em)/1.5 handlee, cursive;
}

svg {
  position: fixed;
}

section, [type=range], figure {
  grid-area: 1/1;
}

main {
  box-sizing: border-box;
  grid-gap: 0.25em;
  grid-template-rows: 1fr 1lh;
  justify-self: center;
  padding: min(1.5em, 5vw);
  width: min(100%, 50em);
  min-height: 25em;
  filter: drop-shadow(2px 2px 5px #121212);
}

section {
  overflow: hidden;
}

figure {
  position: relative;
  grid-template-rows: 1fr 2lh;
  z-index: var(--j);
  translate: calc((var(--i) - var(--k))*100%);
}
figure[id=filtered] img {
  filter: url(#f);
}

img, [type=range] {
  height: calc(100% - 2lh);
}

img {
  position: absolute;
  width: 100%;
  object-fit: cover;
  clip-path: inset(0 0 0 calc(var(--j)*var(--val)*1%));
}

figcaption {
  grid-row: 2;
  place-self: center end;
}

a {
  color: dodgerblue;
}

[type=range] {
  /* allow styling in WebKit browsers */
  /* position of thumb vertical midline */
  --pos:
  	calc(1.5em +
  		   var(--val)/100*(100% - 3em));
  /* ensure it's on top of figure siblings; without z-index, 
   * its thumb shows up on top of the figure elements... 
   * but its background is painted underneath 🙀 */
  z-index: 1;
  /* extend beyond lateral edges of parent by a thumb radius */
  margin: 0 -1.5em;
  /* vertical split line coincides with thumb vertical midline */
  background: linear-gradient(90deg, #0000 calc(var(--pos) - .5*2px), currentcolor 0 calc(var(--pos) + .5*2px), #0000 0) 0 0/100% calc(50% - 1.5em) space;
  /* some kind of :hover/ :focus extra style */
  filter: drop-shadow(1px 0 2px rgba(0, 0, 0, var(--hov, 1)));
  /* allow click through to images & right click context menu */
  pointer-events: none;
  /* style thumb cross-browser */
}
[type=range], [type=range]::-webkit-slider-thumb {
  appearance: none;
}
[type=range]::-webkit-slider-thumb {
  /* full area coverage gradient */
  --full: linear-gradient(red 0 0);
  /* set explicitly as it's content-box in Firefox & 
   * we want border & padding subtracted from dims */
  box-sizing: border-box;
  /* highlight thumb boundary */
  border: solid 2px currentcolor;
  /* create space between lateral ◀ ▶ tips & border */
  /* precisely ½ of width of a background-size  
   * rectangle minus a border width */
  padding: calc(0.63em + -1*2px);
  /* set both width & height to same value here as 
   * aspect-ratio fails in Firefox for slider thumbs */
  width: 3em;
  height: 3em;
  border-radius: 50%;
  /* make round */
  background: repeating-conic-gradient(from 60deg, currentcolor 0% 60deg, #0000 0% 50%) 0/42% space border-box;
  /* mask out padding area containing half backgrounds 
   * not covered by border; border area + content-box 
   * remain visible; out of the ▶◀ ▶◀ bg pattern, 
   * the outer triangles are masked out, leaving ◀ ▶ */
  mask: var(--full) content-box, var(--full) padding-box exclude, var(--full);
  /* make it clickable as slider was made unclickable 
   * to allow for click through to images and context 
   * menu on them */
  pointer-events: auto;
  /* proper resize cursor */
  cursor: ew-resize;
}
[type=range]::-moz-range-thumb {
  /* full area coverage gradient */
  --full: linear-gradient(red 0 0);
  /* set explicitly as it's content-box in Firefox & 
   * we want border & padding subtracted from dims */
  box-sizing: border-box;
  /* highlight thumb boundary */
  border: solid 2px currentcolor;
  /* create space between lateral ◀ ▶ tips & border */
  /* precisely ½ of width of a background-size  
.........完整代码请登录后点击上方下载按钮下载查看