js+css实现颜色分割翻转对比图片幻灯片代码-html代码-BFW代码库

js+css实现颜色分割翻转对比图片幻灯片代码

代码语言：html

所属分类：幻灯片

代码描述：js+css实现颜色分割翻转对比图片幻灯片代码

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

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

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

  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  height: 100%;
  width: 100%;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial;
}

.container {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.container img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62%;
  height: auto;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.overlay-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300vw;
  height: 300vh;
  transform: tra.........完整代码请登录后点击上方下载按钮下载查看