图片拖动看底片效果代码-html代码-BFW代码库

图片拖动看底片效果代码

代码语言：html

所属分类：拖放

代码描述：图片拖动看底片效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>

@keyframes float {
  to {
    transform: translateY(0.75em);
  }
}
* {
  margin: 0;
  font: inherit;
}

body, div {
  display: grid;
}

body {
  overflow-x: hidden;
  height: 100vh;
  perspective: 35em;
  background: #333;
}

.card {
  --hl: 0;
  --card-w: clamp(8em, calc(80*1vw), 50em);
  --card-h: calc(2*var(--card-w));
  --p: calc(var(--k)*1%);
  --dif-inf: clamp(0, calc(var(--k) - 15), 1);
  --dif-sup: clamp(0, calc(100 - 15 - var(--k)), 1);
  align-content: space-between;
  grid-template: repeat(2, calc(1.5*1em + 2*0.5em))/var(--card-w);
  place-self: center;
  overflow: hidden;
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 0.5em;
  box-shadow: 4px 4px 23px;
  background: linear-gradient(0deg, transparent var(--p), #fff 0), url(//repo.bfw.wiki/bfwrepo/image/5fe1bc8e0ed82.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_400,/quality,q_90) 50%/cover;
  background-blend-mode: exclusion;
  filter: sepia(calc(1 - var(--hl)));
  transition: 0.25s;
  transition-property: transform, filter;
}
.card::before, .card::after {
  --q: 0;
  --not-q: calc(1 - var(--q));
  z-index: 1;
  grid-area: calc(1 + var(--not-q))/1;
  justify-self: start;
  margin: 0.5em;
  padding: 0 0.25em;
  border-radius: 0.25em;
  opacity: calc(var(--hl)*(var(--not-q)*var(--dif-inf) + 											var(--q)*var(--dif-sup)));
  background: tomato;
  font: 300 1em/1.5 lato, sans-serif;
  text-transform: uppercase;
  filter: Invert(var(--q));
  pointer-events: none;
  transition: opacity 0.25s;
  content: "before";
}
.card::after {
  --q: 1;
  content: "after";
}
.card:hover, .card:focus-within {
  --hl: 1 ;
}
.card:hover {
  transform: rotatex(calc(clamp(-.5, var(--j), .5)*10deg)) rotatey(calc(clamp(-.5, var(--i), .5)*-10deg));
}
@media (min-aspect-ratio: 1/2) {
  .card {
    --card-h: clamp(8em, calc(80*1vh), 50em);
    --card-w: calc(var(--card-h)/2) ;
  }
}

[type=range] {
  grid-area: 1/1/span 2/span 1;
  place-self: center;
  width: calc(var(--card-h) + 5em);
  height: var(--card-w);
  transform: rotate(-90deg);
  background: transparent;
  cursor: pointer;
}
[type=range], [type=range]::-webkit-slider-th.........完整代码请登录后点击上方下载按钮下载查看