css实现两张照片拖动分界线对比查看前后差异效果代码-html代码-BFW代码库

css实现两张照片拖动分界线对比查看前后差异效果代码

代码语言：html

所属分类：拖放

代码描述：css实现两张照片拖动分界线对比查看前后差异效果代码

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


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

<head>

  <meta charset="UTF-8">
  


  
  
<style>

:root {
  /* Set aspect ratio for .before-after-container.  
     Images need to be same aspect ratio as container in pixels. 
     Handy tool to get aspect ratio for any image dimension.
  
    ---> https://www.digitalrebellion.com/webapps/aspectcalc
  
  Aspect Ratios on CSS Tricks
   ----> https://css-tricks.com/almanac/properties/a/aspect-ratio/
  
     */

  --before-after-aspect-ratio: 1 / 1;    /* <--- Square 1080px x 1080px */

  /* Before and After Images */
  --before-image: url(//repo.bfw.wiki/bfwrepo/image/60078a8d5f89d.png);
  --after-image: url(//repo.bfw.wiki/bfwrepo/image/60078abad6d5a.png);

  /** **************
  
  Example with a 16 / 9 ratio 
    --before-after-aspect-ratio: 16 / 9;
    --before-image: url(https://assets.codepen.io/191814/16-9-original-Great-Grandfather.jpg);
    --after-image: url(https://assets.codepen.io/191814/16-9-Repaired-Sharpened-Great-Grandfather.jpg);
  
**************** */

  /* Before After Container Background Color  */
  --before-after-background-color: #1f1f1c;
}

.before-after-container {
  aspect-ratio: var(--before-after-aspect-ratio);
  background: var(--before-after-background-color);
  width:400px;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}
.before-after-container figure {
  background-image: var(--after-image);
  position: relative;
  margin: 0;
  background-size: cover;
  width:400px;
  height: 100%;
}
#before_after {
  background-image: var(--before-image);
  background-size: cover;
  bottom: 0;
  border-right: 5px solid rgba(255, 255, 255, 0.7);
  box-shadow: 10px 0 15px -13px #000;
  height: 100%;
  max-width: 98.6%;
  min-width: 0.6%;
  overflow: visible;
  position: absolute;
  width: 50%;
  animation: first 2s 1 normal ease-in-out 0.1s;
  -webkit-animation: first 2s 1 normal ease-in-out 0.1s;
}
input#before_after_slider {
  -moz-appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  cursor: col-resize;
  height: 100vw;
  left: 0;
  margin: 0;
  outline: none;
  padding: 0;
  position: relative;
  top: -100vw;
  width: 100%;
}
input#before_after_slider::-moz-range-track {
  background: transparent;
}
input#before_after_slider::-ms-track {
  border: none;
  background-color: transparent;
  height: 100vw;
  left: 0;
  top: -100vw;
  width: 100%;
  margin: 0;
  padding: 0;
    outline: none;
  position: relative;
  cursor: col-resize;
  color: transparent;
}
input#before_after_slider::-ms-fill-lower {
  background-color: transparent;
}
input#before_after_slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 100vw;
  width: 0.5%;
  opacity: 0;
}
input#before_after_slider::-moz-range-thumb {
  -moz-appearance: none;
  height: 100vw;
  width: 0.5%;
  opacity: 0;
}
input#before_after_slider::-ms-thumb {
  height: 100vw;
  width: 0.5%;
  o.........完整代码请登录后点击上方下载按钮下载查看