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