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

css实现落地窗户白天与夜晚开灯效果

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