css实现一个拉开窗帘交互效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：css实现一个拉开窗帘交互效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  

  
<style>
* {
  box-sizing: border-box;
  transform-style: preserve-3d;
}
:root {
  --height: 300px;
  --width: calc(0.6 * var(--height));
  --glass: rgba(207,229,252,0.5);
  --shimmer: rgba(255,255,255,0.95);
  --w-1: #546043;
  --w-2: #373c2f;
  --f-1: #251b0e;
  --f-2: #372915;
  --f-3: #5c4424;
  --f-4: #6e522b;
  --i-1: #574638;
  --b-1: #b5bea7;
  --b-2: #6a7557;
  --b-3: #353b2b;
}
body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(255,230,153,0.5);
}
.cuboid {
  width: 100%;
  height: 100%;
  position: relative;
  pointer-events: none;
}
.cuboid__side {
  pointer-events: none;
}
.cuboid__side:nth-of-type(1) {
  height: calc(var(--thickness) * 1px);
  width: 100%;
  position: absolute;
  top: 0;
  transform: translate(0, -50%) rotateX(90deg);
}
.cuboid__side:nth-of-type(2) {
  height: 100%;
  width: calc(var(--thickness) * 1px);
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%) rotateY(90deg);
}
.cuboid__side:nth-of-type(3) {
  width: 100%;
  height: calc(var(--thickness) * 1px);
  position: absolute;
  bottom: 0;
  transform: translate(0%, 50%) rotateX(90deg);
}
.cuboid__side:nth-of-type(4) {
  height: 100%;
  width: calc(var(--thickness) * 1px);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%) rotateY(90deg);
}
.cuboid__side:nth-of-type(5) {
  height: 100%;
  width: 100%;
  transform: translate3d(0, 0, calc(var(--thickness) * 0.5px));
  position: absolute;
  top: 0;
  left: 0;
}
.cuboid__side:nth-of-type(6) {
  height: 100%;
  width: 100%;
  transform: translate3d(0, 0, calc(var(--thickness) * -0.5px)) rotateY(180deg);
  position: absolute;
  top: 0;
  left: 0;
}
.scene {
  transform: rotateX(-24deg) rotateY(32deg);
}
.window {
  height: var(--height);
  width: var(--width);
  background: linear-gradient(var(--i-1), var(--i-1)) 0 0/100% 5% no-repeat, linear-gradient(var(--i-1), var(--i-1)) 0 0/5% 100% no-repeat, linear-gradient(var(--i-1), var(--i-1)) 100% 0/5% 100% no-repeat, linear-gradient(var(--i-1), var(--i-1)) 0 100%/100% 5% no-repeat, linear-gradient(var(--i-1), var(--i-1)) 0 64%/100% 8% no-repeat, linear-gradient(130deg, transparent 0 15%, var(--shimmer) 16% 35%, transparent 36% 40%, var(--shimmer) 41% 44%, transparent 45%), var(--glass);
  position: relative;
}
.window__cord {
  height: 94%;
  width: 2%;
  background: #fafafa;
  right: 10%;
  position: absolute;
  top: 0;
  transform: translate3d(0, 0, 20px);
}
.window__cord--back {
  height: 94%;
  width: 2%;
  background: #e0e0e0;
  right: 12%;
  position: absolute;
  top: 0;
  transform: translate3d(0, 0, 18px);
}
.frame {
  position: absolute;
}
.frame--top {
  width: 130%;
  height: 5%;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 0);
}
.frame--left {
  width: 10%;
  height: 100%;
  right: 100%;
  top: 0;
}
.frame--right {
  width: 10%;
  height: 100%;
  left: 100%;
  top: 0;
}
.frame--bottom {
  width: 120%;
  height: 10%;
  left: 50%;
  top: 105%;
  transform: translate(-50%, 0);
}
.frame--sill {
  width: 130%;
  height: 5%;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0);
}
.wall {
  position: absolute;
  height: 200vmax;
  width: 200vmax;
  background: linear-gradient(var(--w-1) 51%, var(--f-1) 51% 52%, var(--w-2) 52% 100%), var(--w-1);
}
.wall--top {
  bottom: calc(50% + (var(--height) * 0.5));
  left: 50%;
  transform: translate3d(-50%, 0, 10px);
  background: var(--w-1);
}
.wall--bottom {
  top: calc(50% + (var(--height) * 0.5));
  left: 50%;
  transform: translate3d(-50%, 0, 10px);
  background: var(--w-2);
}
.wall--left {
  right: calc(50% + (var(--width) * 0.5));
  top: 50%;
  transform: translate3d(0, -50%, 10px);
}
.wall--right {
  left: calc(50% + (var(--width) * 0.5));
  top: 50%;
  transform: translate3d(0, -50%, 10px);
}
.blinds {
  height: 99%;
  width: 99%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 10px);
}
.blinds__blinds {
  --open: 0;
  width: calc(0.99 * var(--width));
  height: calc(0.99 * var(--height));
  position: fixed;
  left: 0;
  top: 0;
  transform-origin: 50% 0;
  transform: translate(0, -50%);
}
.blind {
  width: 100%;
  height: 5%;
  background: var(--b-1);
  border: 1px solid var(--b-2);
  transform: translate(0, calc(((-95 * (var(--index, 0))) * var(--open)) * 1%)) rotateX(calc((85 - ((1 - var(--open)) * 83)) * 1deg));
}
.peter,
.peter__hat {
  overflow: visible !important;
  position: absolute;
  top: 0;
  left: 0;
  height: 120px;
  width: 120px;
  transition: transform 0.1s ease;
  transform: translate3d(calc(var(--width) * 0.9), calc(var(--height) * -0.6), 100px) rotateY(-32deg) rotateX(24deg) scale(var(--peter, 0));
}
.peter__hat {
  transition: transform 0.1s 0.1s ease, opacity 0.1s ease;
  opacity: var(--thug, 0);
  transform: translate3d(calc(var(--width) * 0.9), calc(var(--height) * -0.6), 101px) rotateY(-32deg) rotateX(24deg) translate(0, calc((-80 + (80 * var(--thug, 0))) * 1px));
}
.peter__border {
  stroke: #b3b3b3;
}
.peter__backdrop {
  fill: #b8e0b8;
}
.cord {
  contain: layout inline-size;
  --css-contain: layout inline-size;
  position: absolute;
  top: 50%;
  left: 0;
}
.cord__string {
  height: calc(var(--height) * 0.45);
  width: calc(var(--width) * 0.02);
  background: #fafafa;
  position: fixed;
  top: 0;
  left: 0;
  transform-origin: 50% 0;
  transform: translate3d(calc(var(--width) * 0.9), 0, 5px) translate(-50%, 0) scaleY(clamp(0.2, var(--cord, 0), 1));
}
.cord__handle {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-54%, 10%) scale(0.5) scaleX(0.5);
  height: 20px;
  width: 16px;
  clip-path: polygon(0 100%, 100% 100%, 80% 0, 20% 0);
  -webkit-clip-path: polygon(0 100%, 100% 100%, 80% 0, 20% 0);
  pointer-events: none;
  background: var(--b-3);
}
.cord__handle:after {
  clip-path: polygon(0 100%, 100% 100%, 80% 0, 20% 0);
  -webkit-clip-path: polygon(0 100%, 100% 100%, 80% 0, 20% 0);
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: var(--b-2);
  transform: scale(0.75);
}
.cord__thumb {
  min-height: 15px;
  width: 10px;
  resize: vertical;
  overflow: hidden;
  transform-origin: 100% 0;
  transform: translate3d(calc(var(--width) - 150%), 0, 20px) scale(2) scaleX(2);
  max-height: calc((0.99 * var(--height)) * 0.25);
}
.cord__thumb:hover {
  background: rgba(64,127,191,0.25);
}
.cord__thumb:active {
  background: rgba(64,127,191,0);
}
::-webkit-resizer {
  display: block;
  -webkit-appearance: none;
          appearance: none;
  box-sizing: border-box;
  height: 44px !important;
  width: 44px !important;
}
@container (min-height: 50px) {
  .blinds__blinds {
    --open: 0;
  }
  .peter,
  .peter__hat {
    --peter: 0;
    --thug: 0;
  }
}
@media --css-container and (min-height: 50px) {
  .blinds__blinds {
    --open: 0;
  }
  .peter,
  .peter__hat {
    --thug: 0;
    --peter: 0;
  }
}
@container (min-height: 54px) {
  .blinds__blinds {
    --open: 0.1;
  }
  .peter,
  .peter__hat {
    --peter: 0;
    --thug: 0;
  }
}
@media --css-container and (min-height: 54px) {
  .blinds__blinds {
    --open: 0.1;
  }
  .peter,
  .peter__hat {
    --thug: 0;
    --peter: 0;
  }
}
@container (min-height: 58px) {
  .blinds__blinds {
    --open: 0.2;
  }
  .peter,
  .peter__hat {
    --peter: 0;
    --thug: 0;
  }
}
@media --css-container and (min-height: 58px) {
  .blinds__blinds {
    --open: 0.2;
  }
  .peter,
  .peter__hat {
    --thug: 0;
    --peter: 0;
  }
}
@container (min-height: 62px) {
  .blinds__blinds {
    --open: 0.3;
  }
  .peter,
  .peter__hat {
    --peter: 1;
    --thug: 0;
  }
}
@media --css-container and (min-height: 62px) {
  .blinds__blinds {
    --open: 0.3;
  }
  .peter,
  .peter__hat {
    --thug: 0;
    --peter: 1;
  }
}
@container (min-height: 66px) {
  .blinds__blinds {
    --open: 0.4;
  }
  .peter,
  .peter__hat {
    --peter: 1;
    --thug: 0;
  }
}
@media --css-container and (min-height: 66px) {
  .blinds__blinds {
    --open: 0.4;
  }
  .peter,
  .peter__hat {
    --thug: 0;
    --peter: 1;
  }
}
@container (min-height: 70px) {
  .blinds__blinds {
    --open: 0.5;
  }
  .peter,
  .peter__hat {
    --peter: 1;
    --thug: 0;
  }
}
@media --css-container and (min-height: 70px) {
  .blinds__blinds {
    --open: 0.5;
  }
  .peter,
  .peter__hat {
    --thug: 0;
    --peter: 1;
  }
}
@container (min-height: 74px) {
  .blinds__blinds {
    --open: 0.6;
  }
  .peter,
  .peter__hat {
    --peter: 1;
    --thug: 0;
  }
}
@media --css-container and (min-height: 74px) {
  .blinds__blinds {
    --open: 0.6;
  }
  .peter,
  .peter__hat {
    --thug: 0;
    --peter: 1;
  }
}
@container (min-height: 78px) {
  .blinds__blinds {
    --open: 0.7;
  }
  .peter,
  .peter__hat {
    --peter: 1;
    --thug: 0;
  }
}
@media --css-container and (min-height: 78px) {
  .blinds__blinds {
    --open: 0.7;
  }
  .peter,
  .peter__hat {
    --thug: 0;
    --peter: 1;
  }
}
@container (min-height: 82px) {
  .blinds__blinds {
    --open: 0.8;
  }
  .peter,
  .peter__hat {
    --peter: 1;
    --thug: 0;
  }
}
@media --css-container and (min-height: 82px) {
  .blinds__blinds {
    --open: 0.8;
  }
  .peter,
  .peter__hat {
    --thug: 0;
    --peter: 1;
  }
}
@container (min-height: 86px) {
  .blinds__blinds {
    --open: 0.9;
  }
  .peter,
  .peter.........完整代码请登录后点击上方下载按钮下载查看