用html写一个窗口风景动画

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>窗边风景动画</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <!-- 窗户 -->
  <div class="window-top" id="window-top"></div>
  <div class="window-square" id="window-main"></div>

  <!-- 窗框线 -->
  <div class="inner-line-hz-one"></div>
  <div class="inner-line-hz-two"></div>
  <div class="inner-line-hz-three"></div>
  <div class="inner-line-vt"></div>
  <div class="floor-line"></div>

  <!-- 植物 -->
  <div class="plant-one"></div>
  <div class="plant-two"></div>
  <div class="plant-two-shadow"></div>
  <div class="flower-blue-leaf"></div>
  <div class="flower-blue-line"></div>
  <div class="flower-blue-leaf-two"></div>
  <div class="flower-blue-line-two"></div>
  <div class="plant-shadow"></div>

  <!-- 植物的茎 -->
  <div class="root-one"></div>
  <div class="root-two"></div>
  <div class="root-three"></div>
  <div class="root-four"></div>
  <div class="root-five"></div>
  <div class="root-six"></div>

  <!-- 叶子 -->
  <div class="main-leaf-one"></div>
  <div class="main-leaf-two"></div>
  <div class="main-leaf-three"></div>
  <div class="main-leaf-four"></div>
  <div class="main-leaf-five"></div>
  <div class="main-leaf-six"></div>

  <!-- 云彩 -->
  <div class="cloud-one c"></div>
  <div class="cloud-two c"></div>
  <div class="cloud-three c"></div>
  <div class="cloud-ball-one c"></div>
  <div class="cloud-ball-two c"></div>
  <div class="cloud-ball-three c"></div>
  <div class="cloud-ball-four c"></div>
  <div class="cloud-ball-five c"></div>
  <div class="cloud-ball-six c"></div>

  <!-- 灯 -->
  <div class="lamp" id="light-switch"></div>
  <div class="lamp-wire"></div>
  <div class="lamp-shadow"></div>

  <!-- 夜晚部分-星星 -->
  <div class="star-one s"></div>
  <div class="star-two s"></div>
  <div class="star-three s"></div>
  <div class="star-four s"></div>
  <div class="star-five s"></div>
  <div class="star-six s"></div>

  <!-- 月亮 -->
  <div class="moon"></div>
  <div class="moon-crater"></div>

  <!-- 灯光 -->
  <div class="light-source"></div>

  <!-- partial -->
  <script src="./script.js"></script>
</body>
</html>
js 复制代码
/* 根据 id 选择 */
const lamp = document.getElementById("light-switch");
const topWindow = document.getElementById("window-top");
const mainWindow = document.getElementById("window-main");

/* css 选择 */
const lightSource = document.querySelector(".light-source");
const moon = document.querySelector(".moon");
const clouds = document.querySelectorAll(".c");
const stars = document.querySelectorAll(".s");

/* 事件监听 */
lamp.addEventListener("click", () => {
  topWindow.classList.toggle("night");
  mainWindow.classList.toggle("night");
  clouds.forEach(c => c.classList.toggle("hide-cloud"));
  lightSource.classList.toggle("show-light");
  moon.classList.toggle("show-moon");
  stars.forEach(s => s.classList.toggle("show-star"));
});
css 复制代码
/* 设置需要用的参数 */
:root {
  --page-background: #fef5e7;
  --light-purple: #adbdfc;
  /* 窗户部分用到的参数 */
  --window-top-height: 45;
  --window-top-width: 40;
  --window-day-background: #d6eaf8;
  --window-square-height: 40;
  --window-square-width: 40;
  --floor-line-height: 1;
  --floor-line-width: 80;
  --inner-line-vt-width: 62;
  /* 植物部分用到的参数 */
  --plant-one-height: 6;
  --plant-one-width: 9;
  --plant-two-shadow-height: .5;
  --plant-two-shadow-width: 4;
  --flower-blue-height: 6;
  --flower-blue-width: 3;
  --flower-blue-line-height: .2;
  --flower-blue-line-width: 5;
  --flower-two-blue-height: 7;
  --flower-two-blue-width: 4.5;
  --root-height: 10;
  --root-width: 33;
  /* 叶子部分需要的参数 */
  --main-leaf-height: 8;
  --main-leaf-width: 8;
  /* 云彩部分用到的参数 */
  --cloud-base-height: 8;
  --cloud-base-width: 17;
  --cloud-ball-height: 5;
  --cloud-ball-width: 5;
  /* 灯部分用到的参数 */
  --lamp-height: 15;
  --lamp-width: 19;
  --lamp-wire-height: 70;
  --lamp-wire-width: .1; 
  /* 星星部分用到的参数 */
  --star-height: 1.2;
  --star-width: 1.2;
  /* 灯光部分需要的参数 */
  --light-source-height: 20;
  --light-source-width: 20;
  /* 月亮部分需要的参数 */
  --moon-height: 10;
  --moon-width: 10;
} 

/* 页面主体背景、位置 */
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%);
  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%);
  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: #000;
  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: #6e8ce9;
  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-two-blue-height) * 1vmin);
  width: calc(var(--flower-two-blue-width) * 1vmin);
  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-one {
  position: fixed;
  height: calc(var(--root-height) * 1vmin);
  width: calc(var(--root-width) * 1vmin);
  top: 35%;
  right: -49%;
  z-index: 88;
  border: 1px solid #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%;
  z-index: 88;
  border: 1px solid #000;
  border-color: #000 transparent transparent transparent;
  border-radius: 60% / calc(var(--root-height) * 1vmin) calc(var(--root-height) / 3.5 * 1vmin) 0 0;
  transform: rotate(69deg);
}

.root-two {
  position: fixed;
  height: calc(var(--root-height) * 1vmin);
  width: calc(var(--root-width) / 1.9 * 1vmin);
  top: 59%;
  right: -2.8%;
  z-index: 88;
  border: 1px solid #000;
  border-color: #000 transparent transparent transparent;
  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%;
  z-index: 88;
  border: 1px solid #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);
}

.root-four {
  position: fixed;
  height: calc(var(--root-height) * 1vmin);
  width: calc(var(--root-width) / 2.7 * 1vmin);
  top: 17%;
  right: -19%;
  z-index: 80;
  border: 1px solid #000;
  border-color: #000 transparent transparent transparent;
  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: 1px solid #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-one {
  position: fixed;
  top: 28%;
  right: 8%;
  z-index: 50;
  height: calc(var(--main-leaf-height) * 1vmin);
  width: calc(var(--main-leaf-width) * 1vmin);
  border-radius: 85% 5%;
  border-left: .5px solid #111;
  border-bottom: .5px solid #111;
  background: #4d8473;
  transform: rotate(93deg);
}

.main-leaf-two {
  position: fixed;
  top: 48%;
  right: 8%;
  z-index: 50;
  height: calc(var(--main-leaf-height) * 1vmin);
  width: calc(var(--main-leaf-width) * 1vmin);
  border-radius: 85% 0%;
  border-left: 1px solid #111;
  border-bottom: 1px solid #111;
  background: #4d8473;
  transform: rotate(85deg);
}

.main-leaf-three {
  position: fixed;
  top: 0%;
  right: -8.5%;
  z-index: 50;
  height: calc(var(--main-leaf-height) * 1.1 * 1vmin);
  width: calc(var(--main-leaf-width) * 1.3 * 1vmin);
  border-radius: 95% 10%;
  border-right: 1px solid #111;
  border-top: 1px solid #111;
  background: #4d8473;
  transform: rotate(-35deg);
}

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

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

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

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

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

.cloud-three {
  width: calc(var(--cloud-base-width) * 1.1 * 1vmin);
  height: calc(var(--cloud-base-height) / 1.2 * 1vmin);
  position: fixed;
  top: -30%;
  right: 5%;
  border-radius: 50%;
  background: linear-gradient(to bottom, #fff 50%, transparent 50%);
  animation: cloud 4s infinite;
}

.cloud-ball-one {
  position: fixed;
  height: calc(var(--cloud-ball-height) * 1.5 * 1vmin);
  width: calc(var(--cloud-ball-width) * 1.5 * 1vmin);
  background: linear-gradient(to bottom, #fff 50%, transparent 50%);
  border-radius: 50%;
  z-index: 99;
  top: 48%;
  animation: cloud 4s infinite;
}

.cloud-ball-two {
  position: fixed;
  height: calc(var(--cloud-ball-height) * 2 * 1vmin);
  width: calc(var(--cloud-ball-width) * 2 * 1vmin);
  background: linear-gradient(to bottom, #fff 50%, transparent 50%);
  border-radius: 50%;
  z-index: 99;
  top: 45%;
  left: 10%;
  animation: cloud 4s infinite;
}

.cloud-ball-three {
  position: fixed;
  height: calc(var(--cloud-ball-height) * 1.5 * 1vmin);
  width: calc(var(--cloud-ball-width) * 1.3 * 1vmin);
  background: linear-gradient(to bottom, #fff 50%, transparent 50%);
  border-radius: 50%;
  z-index: 99;
  top: -32%;
  left: 54%;
  animation: cloud 4s infinite;
}

.cloud-ball-four {
  position: fixed;
  height: calc(var(--cloud-ball-height) * 2 * 1vmin);
  width: calc(var(--cloud-ball-width) * 2 * 1vmin);
  background: linear-gradient(to bottom, #fff 50%, transparent 50%);
  border-radius: 50%;
  z-index: 99;
  top: -35%;
  left: 65%;
  animation: cloud 4s infinite;
}

.cloud-ball-five {
  position: fixed;
  height: calc(var(--cloud-ball-height) * 1.5 * 1vmin);
  width: calc(var(--cloud-ball-width) * 1.5 * 1vmin);
  background: linear-gradient(to bottom, #fff 50%, transparent 50%);
  border-radius: 50%;
  z-index: 99;
  top: -3%;
  left: 5%;
  animation: cloud 4s infinite;
}

.cloud-ball-six {
  position: fixed;
  height: calc(var(--cloud-ball-height) * 2 * 1vmin);
  width: calc(var(--cloud-ball-width) * 2 * 1vmin);
  background: linear-gradient(to bottom, #fff 50%, transparent 50%);
  border-radius: 50%;
  z-index: 99;
  top: -5%;
  left: 15%;
  animation: cloud 4s infinite;
}

@-webkit-keyframes cloud {
  0% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
  25% {
    -webkit-transform: translate(2px, 2px);
    transform: translate(2px, 2px);
  }
  50% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
  75% {
    -webkit-transform: translate(-1px, -1px);
    transform: translate(-1px, -1px);
  }
  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
}

@keyframes cloud {
  0% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
  25% {
    -webkit-transform: translate(2px, 2px);
    transform: translate(2px, 2px);
  }
  50% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
  75% {
    -webkit-transform: translate(-1px, -1px);
    transform: translate(-1px, -1px);
  }
  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
}

/* 灯 */
.lamp {
  position: fixed;
  height: calc(var(--lamp-height) * 1vmin);
  width: calc(var(--lamp-width) * 1vmin);
  top: -31%;
  right: -5%;
  z-index: 999;
  border-radius: 50%;
  background: linear-gradient(to bottom, #eb8fbb 42%, #000 43%, transparent 45%);
}

.lamp:hover {
  /* 触碰到灯时,鼠标箭头会变成小手 */
  cursor: pointer;
}

.lamp-wire {
  position: fixed;
  top: -206%;
  right: 18%;
  z-index: 9999;
  height: calc(var(--lamp-wire-height) * 1vmin);
  width: calc(var(--lamp-wire-width) * 1vmin);
  background: #444;
}

.lamp-shadow {
  height: calc(var(--lamp-width) / 1.01 * 1vmin);
  width: calc(var(--plant-two-shadow-width) / 3.4 * 1vmin);
  background: #222;
  position: fixed;
  z-index: 100;
  top: -38%;
  right: 17.3%;
  border-radius: 90% 50%;
  transform: rotate(89deg);
}

/* 夜晚部分的背景 */
.night {
  background: #120326;
}

/* 切换时需要隐藏云部分 */
.hide-cloud {
  visibility: hidden;
}

/* 星星 */
.star-one,
.star-two,
.star-three,
.star-four,
.star-five,
.star-six {
  position: fixed;
  height: calc(var(--star-height) * 1vmin);
  width: calc(var(--star-width) * 1vmin);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  background: #fff;
  border: 1px solid #eee;
  /* 先隐藏,后面通过 js 使之显示出来 */
  visibility: hidden;
}

.star-one {
  top: 50%;
  left: 60%;
  transform: rotate(45deg);
  animation: twinkle 2s infinite linear;
}

.star-two {
  top: 60%;
  left: 20%;
  transform: rotate(80deg);
  animation: twinkle 4s infinite linear;
}

.star-three {
  top: 10%;
  left: 40%;
  transform: rotate(20deg);
  animation: twinkle 2s infinite linear;
}

.star-four {
  top: -40%;
  left: 60%;
  transform: rotate(45deg);
  animation: twinkle 1s infinite linear;
}

.star-five {
  top: 30%;
  left: 20%;
  transform: rotate(45deg);
  animation: twinkle 3s infinite linear;
}

.star-six {
  top: -10%;
  left: 80%;
  transform: rotate(45deg);
  animation: twinkle 1s infinite linear;
}

@-webkit-keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.8;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.8;
  }
}

@keyframes twinkle {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.8;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.8;
  }
}

/* 灯光 */
.light-source {
  position: fixed;
  top: -65%;
  right: -28.5%;
  filter: brightness(105%);
  z-index: 100;
  height: calc(var(--light-source-height) * 1vmin);
  width: calc(var(--lamp-width) / 1.02 * 1vmin);
  border-bottom: calc(var(--light-source-height) * 2.32 * 1vmin) solid #f9e79f;
  opacity: 0.6;
  border-left: calc(var(--lamp-width) / 2 * 1vmin) solid transparent;
  border-right: calc(var(--lamp-width) / 2 * 1vmin) solid transparent;
  border-top: 0;
  visibility: hidden;
  animation: twinkle 10s infinite linear;
}

.show-light,
.show-moon,
.show-star {
  visibility: visible !important;
} 

/* 月亮 */
.moon {
  height: calc(var(--moon-height) * 1vmin);
  width: calc(var(--moon-width) * 1vmin);
  position: fixed;
  background: linear-gradient(-45deg, #fff 40%, #eee 80%);
  border-radius: 50%;
  top: -33%;
  left: 13%;
  box-shadow: 0px 0px 5px 1px #fff;
  visibility: hidden;
}
相关推荐
我要洋人死6 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人17 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人18 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR23 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香25 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969328 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai33 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_91542 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#