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

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

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看