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