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

css实现一个拉开窗帘交互效果代码

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