css实现落地窗户白天与夜晚开灯效果-html代码-BFW代码库

代码语言：html
代码描述：css实现落地窗户白天与夜晚开灯效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
:root {
  --page-background: #FEF5E7;
  --light-purple: #ADBDFC;
  --window-day-background: #D6EAF8;
  --window-square-height: 40;
  --window-square-width: 40;
  --window-top-height: 45;
  --window-top-width: 40;
  --floor-line-width: 80;
  --floor-line-height: 1;
  --inner-line-vt-width: 62;
  --plant-one-width: 9;
  --plant-one-height: 6;
  --plant-two-shadow-width: 4;
  --plant-two-shadow-height: .5;
  --flower-blue-width: 3;
  --flower-blue-height: 6;
  --flower-blue-two-w: 4.5;
  --flower-blue-two-h: 7;
  --flower-blue-line-width: 5;
  --flower-blue-line-height: .2;
  --root-height: 10;
  --root-width: 33;
  --main-leaf-h: 8;
  --main-leaf-w: 8;
  --cloud-base-width: 17;
  --cloud-base-height: 8;
  --cloud-ball-h: 5;
  --cloud-ball-w: 5;
  --lamp-w: 19;
  --lamp-h: 15;
  --lamp-wire-w: .1;
  --lamp-wire-h: 70;
  --light-source-w: 20;
  --light-source-h: 20;
  --moon-h: 10;
  --moon-w: 10;
  --star-h: 1.2;
  --star-w: 1.2;
}

body {
  position: fixed;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--page-background);
}

.window-square {
  height: calc(var(--window-square-height) * 1vmin);
  width: calc(var(--window-square-width) * 1vmin);
  background: var(--window-day-background);
}

.window-top {
  height: calc(var(--window-top-height) * 1vmin);
  width: calc(var(--window-top-width) * 1vmin);
  border-radius: 50%;
  position: fixed;
  top: -55%;
  background: linear-gradient(to bottom, var(--window-day-background) 50%, transparent 50%);
}

.floor-line {
  position: fixed;
  left: -45%;
  height: calc(var(--floor-line-height) / 3 * 1vmin);
  width: calc(var(--floor-line-width) * 1vmin);
  background: #AAA;
  border-radius: 1rem;
}

.inner-line-hz-one,
.inner-line-hz-two,
.inner-line-hz-three,
.inner-line-vt {
  position: fixed;
  top: -5%;
  height: calc(var(--floor-line-height) / 6 * 1vmin);
  width: calc(var(--window-square-width) * 1vmin);
  background: #AAA;
}

.inner-line-hz-one {
  top: 33%;
}

.inner-line-hz-two {
  top: 70%;
}

.inner-line-vt {
  top: 22.4%;
  left: -27%;
  transform: rotate(90deg);
  width: calc(var(--inner-line-vt-width) * 1vmin);
}

.plant-one {
  position: fixed;
  bottom: -1%;
  right: -8%;
  height: calc(var(--plant-one-height) * 1vmin);
  width: calc(var(--plant-one-width) * 1vmin);
  background: linear-gradient(to bottom, #000 6%, #BA4A00 12%);
/*   background: #BA4A00; */
  border-radius: 13%;
  clip-path: polygon(0 0, 100% 0, 80% 100%, 19% 100%);
}

.plant-two {
  position: fixed;
  bottom: -5.2%;
  right: -12%;
  z-index: 999;
  height: calc(var(--plant-one-height) / 1.5 * 1vmin);
  width: calc(var(--plant-one-width) / 2 * 1vmin);
  background: linear-gradient(to bottom, #000 5%, #EB8FBB 10%);
/*   background: #e78c9a; */
/*   background: #BA4A00; */
  border-radius: 10%;
  clip-path: polygon(0 0, 100% 0, 80% 100%, 19% 100%);
}

.plant-two-shadow {
  height: calc(var(--plant-two-shadow-height) * 1vmin);
  width: calc(var(--plant-two-shadow-width) * 1vmin);
  background: #111;
  position: fixed;
  z-index: -1;
  bottom: -4.9%;
  right: -15%;
  border-radius: 50%;
  box-shadow: 0px 0px 1px 0px #000;
}

.flower-blue-leaf {
  position: fixed;
  height: calc(var(--flower-blue-height) * 1vmin);
  width: calc(var(--flower-blue-width) * 1vmin);
/*   background: #2980B9; */
/*   background: #6482FC; */
  background: #6E8CE9;
/*   background: #6091C8; */
  border-radius: 95% 0;
  transform: rotate(185deg);
  border-left: 1px solid #111;
  border-right: 1px solid #111;
  bottom: 4.3%;
  right: -16%;
}

.flower-blue-line {
  position: fixed;
  height: calc(var(--flower-blue-line-height) * 1vmin);
  width: calc(var(--flower-blue-line-width) * 1vmin);
  background: #333;
  bottom: 10%;
  right: -17.4%;
  transform: rotate(-63deg);
}

.flower-blue-leaf-two {
  position: fixed;
  height: calc(var(--flower-blue-two-h) * 1vmin);
  width: calc(var(--flower-blue-two-w) * 1vmin);
/*   background: #2980B9; */
/*   background: #ADBDFC;
  background: #6482FC; */
/*   background: #6A99C7; */
/*   background: #6E8CE9; */
/*   background: #6091C8; */
  border-left: 1px solid #111;
  border-right: 1px solid #111;
  background: #6E8CE9;
  border-radius: 95% 0%;
  transform: rotate(-48deg);
  bottom: 5.5%;
  right: -10%;
}

.flower-blue-line-two {
  position: fixed;
  height: calc(var(--flower-blue-line-height) * 1vmin);
  width: calc(var(--flower-blue-line-width) * 1vmin);
  background: #333;
  bottom: 10%;
  right: -12%;
  transform: rotate(70deg);
}

.root {
  position: fixed;
  height: calc(var(--root-height) * 1vmin);
  width: calc(var(--root-width) * 1vmin);
  top: 35%;
  right: -49%;
  z-index: 88;
  border: solid 1px #000;
  border-color: #000 transparent transparent transparent;
  border-radius: 50% / calc(var(--root-height) / 6 * 1vmin) calc(var(--root-height) * 1vmin) 0 0;
  transform: rotate(-90deg);
}

.root-two {
  position: fixed;
  height: calc(var(--root-height) * 1vmin);
  width: calc(var(--root-width) / 1.9 * 1vmin);
  top: 59%;
  right: -2.8%;
  border: solid 1px #000;
  border-color: #000 transparent transparent transparent;
  z-index: 88;
  border-radius: 60% / calc(var(--root-height) * 1vmin) calc(var(--root-height) / 3.5 * 1vmin) 0 0;
  transform: rotate(69deg);
}

.root-three {
  position: fixed;
  height: calc(var(--root-height) * 1vmin);
  width: calc(var(--root-width) / 1.5 * 1vmin);
  top: 45%;
  right: -8.1%;
  border: solid 1px #000;
  border-color: #000 transparent transparent transparent;
  border-radius: 60% / calc(var(--root-height) * 1vmin) calc(var(--root-height) / 14 * 1vmin) 0 0;
  transform: rotate(81deg);
  z-index: 88;
}

.root-four {
  position: fixed;
  height: calc(var(--root-height) * 1vmin);
  width: calc(var(--root-width) / 2.7 * 1vmin);
  top: 17%;
  right: -19%;
  border: solid 1px #000;
  border-color: #000 transparent transparent transparent;
  z-index: 80;
  border-radius: 60% / calc(var(--root-height) * 1vmin) calc(var(--root-height) / 8 * 1vmin) 0 0;
  transform: rotate(-85deg);
}

.root-five {
  position: fixed;
  height: calc(var(--root-height) * 1vmin);
  width: calc(var(--root-width) / 1.5 * 1vmin);
  top: 39%;
  right: -39.3%;
  z-index: 88;
  border: solid 1px #000;
  border-color: #000 transparent transparent transparent;
  border-radius: 50% / calc(var(--root-height) / 1.45 * 1vmin) calc(var(--root-height) * 1vmin) 0 0;
  transform: rotate(-60deg);
}

.root-six {
  position: fixed;
  height: calc(var(--root-height) * 1vmin);
  width: calc(var(--root-width) / 1.65 * 1vmin);
  top: 57%;
  right: -38%;
  z-index: 88;
  border: solid 1px #000;
  border-color: #000 transparent transparent transparent;
  border-radius: 50% / calc(var(--root-height) / 1.6 * 1vmin) calc(var(--root-height) * 1vmin) 0 0;
  transform: rotate(-60deg);
}

.main-leaf {
  position: fixed;
  top: 28%;
  right: 8%;
  z-index: 50;
  height: calc(var(--main-leaf-h) * 1vmin);
  width: calc(var(--main-leaf-w) * 1vmin);
  border-radius: 85% 5%;
  border-left: .5px solid #111;
  border-bottom: .5px solid #111;
/*   background: #4B8D78; */
  background: #4D8473;
/*   background: linear-gradient(to bottom, #4D8473 75%, #111 80%); */
  transform: rotate(93deg);
}

.main-leaf-two {
  position: fixed;
  top: 48%;
  right: 8%;
  z-index: 50;
  height: calc(var(--main-leaf-h) * 1vmin);
  width: calc(var(--main-leaf-w) * 1vmin);
  border-left: 1px solid #111;
  border-bottom: 1px solid #111;
  border-radius: 85% 0%;
/*   background: #4B8D78; */
  background: #4D8473;
/*   background: linear-gradient(-65deg, #4D8473 65%, #111 68%); */
  transform: rotate(85deg);
}

.main-leaf-three {
  position: fixed;
  top: 0%;
  right: -8.5%;
  z-index: 50;
  height: calc(var(--main-leaf-h)* 1.1 * 1vmin);
  width: calc(var(--main-leaf-w)* 1.3 * 1vmin);
  border-radius: 95% 10%;
  background: #4D8473;
/*   background: linear-gradient(150deg, #4D8473 65%, #000 68%); */
  transform: rotate(-35deg);
  border-right: 1px solid #111;
  border-top: 1px solid #111;
}

.main-leaf-four {
  position: fixed;
  top: 1%;
  right: -19%;
  z-index: 55;
/*   border: 1px solid black; */
  height: calc(var(--main-leaf-h)* 1.3 * 1vmin);
  width: calc(var(--main-leaf-w)* 1.2 * 1vmin);
  border-radius: 85% 5%;
  background: #4B8D78;
  background: #4D8473;
  transform: rotate(-10deg);
  border-right: 1px solid #111;
  border-top: 1px solid #111;
}

.main-leaf-five {
  position: fixed;
  top: 21%;
  right: -26%;
  z-index: 55;
/*   border: 1px solid black; */
  height: calc(var(--main-leaf-h) * 1.3 * 1vmin);
  width: calc(var(--main-leaf-w) * 1 * 1vmin);
  border-radius: 85% 5%;
  background: #4B8D78;
  background: #4D8473;
  transform: rotate(18deg);
  border-right: 1px solid #111;
  border-top: 1px solid #111;
}

.main-leaf-six {
  position: fixed;
  top: 46%;
  right: -30%;
  z-index: 55;
/*   border: 1px solid black; */
  height: calc(var(--main-leaf-h) / 1.2 * 1vmin);
  width: calc(var(--main-leaf-w) * 1.5 * 1vmin);
  border-radius: 95% 0%;
  background: #4B8D78;
  background: #4D8473;
  transform: rotate(-8deg);
  border-top: 1px solid #111;
  border-right: 1px solid #111;
}

.cloud {
  width: calc(var(--cloud-base-width) * 1vmin);
  height: calc(var(--cloud-base-height) / 1.2 * 1vmin);
  position: fixed;
  top: 50%;
  left: 0%;
  border-radius: 50%;
  background: linear-gradient(to bottom, #fff 50%, transparent 50%);
}

.cloud-two {
  width: calc(var(--cloud-base-width).........完整代码请登录后点击上方下载按钮下载查看