太阳升起和落下(长文警告)

timi先生

已于 2023-05-23 13:47:09 修改

阅读量643

点赞数

分类专栏： CSS 文章标签： css css3 html

于 2023-05-23 13:24:18 首次发布

本文链接：https://blog.csdn.net/qq_35241329/article/details/130822343

版权

CSS 专栏收录该内容

81 篇文章 10 订阅

订阅专栏

今天分享一个太阳升起落下的动画场景。
在这里插入图片描述

有朋友问我为什么只发代码不做说明，今天我们尝试下对代码进行注解说明一下。

首先这个场景大致的可拆分为4个部分：太阳/月亮，右下角的按钮，天上的云和最显眼的建筑。

我们先做一个按钮，它可以控制整个场景的切换，像下面这样我们定义一个按钮和一个标签，：

<input type="checkbox" id="day-night"><label for="day-night"></label>

写了这个按钮就会出现么，答案是：NO。我们还需要一点点小小的CSS代码：

     /* 按钮 */
    input { display: none; }

    /*按钮动画效果切换*/
    input#day-night:checked ~ .content .clouds {
      top: -10vh;
      transition: all 3s var(--cbz) 0s;
      opacity: 1;
      filter: drop-shadow(1vmin -1vmin 1vmin #fff) drop-shadow(-1vmin 1vmin 5vmin #fff) drop-shadow(20vmin 5vmin 5vmin #fff) drop-shadow(-10vmin -1vmin 3vmin #fff);
    }

    input#day-night:checked ~ .content {
      transition: --glass 3s;
      --glass: 200deg;
    }

    /*标签设置*/
    label {
      position: absolute;
      right: 3vmin;
      bottom: 3vmin;
      width: 13vmin;
      height: 5vmin;
      background: #0008;
      border-bottom: 1px solid #fff8;
      border-top: 1px solid #000;
      border-radius: 4vmin;
      cursor: pointer;
      z-index: 3;
    }
    /*标签伪元素before*/
    label:before {
      content: "";
      position: absolute;
      width: 12vmin;
      height: 4vmin;
      background: radial-gradient(circle at 50% 48%, #ffbf00 calc(2vmin - 1px), #fff0 2vmin), radial-gradient(circle at 90% 42%, #fff0 2.5vmin, #e6e6e6 calc(2.5vmin + 1px));
      border-radius: 2vmin;
      left: 0.6vmin;
      top: 0.325vmin;
      transition: all 0.4s ease 1s;
      background-repeat: no-repeat;
      background-size: 4.25vmin 4.25vmin, 4.15vmin 4.15vmin;
      background-position: 7.85vmin 0, 0vmin 0vmin;
    }

    /*标签伪元素after*/
    label:after {
      content: "";
      position: absolute;
      width: 6vmin;
      height: 6vmin;
      border-radius: 100%;
      left: -0.95vmin;
      top: -1.1vmin;
      transition: all 1s var(--cbz) 0s;
      border: 0.5vmin solid #fffc;
      box-shadow: 0 0 1vmin 0 #fffc, 0 0 1vmin 0 #fffc inset;
    }
    
    /*选择器，用来设定点击后的样式改变*/
    input#day-night:checked + label:after {
      border-color: #ffc71e;
      box-shadow: 0 0 1vmin 0.25vmin #ffc71e, 0 0 1vmin 0.25vmin #ffc71e inset;
    }

    input#day-night:checked + label:after {
      left: 6.95vmin;
      transition: all 1s var(--cbz) 0s;
    }

当然还有全局设置不能忘记：


    @property --glass {
      syntax: '<angle>';
      inherits: false;
      initial-value: 337deg;
    }

    * {
      transform-style: preserve-3d;
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 0;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      --cbz: cubic-bezier(0.68, -0.55, 0.27, 1.55);
    }

这样一套操作下来，我们就可以得到右下角的按钮，这个时候整体的页面只有下面的按钮：
在这里插入图片描述
这样看起来不但丑而且很单调，光秃秃的。不过不要紧，我们接着给它填上背景：

<div class="content"></div>

同样加上一点点CSS代码：

   .content {
      --frame: #070b32;
      --bush: #181b38;
      --dot1: radial-gradient(circle at 50% 50%, var(--bush) 0 0.25vmin, #fff0 calc(0.25vmin + 1px) 100%);
      --dot2: radial-gradient(circle at 50% 50%, var(--bush) 0 0.5vmin, #fff0 calc(0.5vmin + 1px) 100%);
      --dot3: radial-gradient(circle at 50% 50%, var(--bush) 0 1.15vmin, #fff0 calc(1.15vmin + 1px) 100%);
      --glass: 337deg;
      --luz1: hsl(var(--glass) 60% 50% / 60%);
      --luz2: hsl(var(--glass) 54% 32%);
      --luz3: hsl(var(--glass) 54% 25%);
      transition: --glass 3s;
      width: 80vmin;
      height: 100vh;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      animation: start-glass 3s var(--cbz) 0s 1;
    }
    .content:before {
      content: "";
      position: absolute;
      width: 100vw;
      height: 100%;
      background: linear-gradient(180deg, #000, #080212, #341c5e, #50587e, #0079d9, #39a7ff,  #70c6ed 100%);
      background-repeat: no-repeat;
      background-size:  100% 300%;
      background-position: 0% 10%;
      transform: translateZ(-100vmin);
      transition: all 3s var(--cbz) 0s;
      animation: start-bg 3s var(--cbz) 0s 1;
    }

    .content:after {
      content: "";
      position: absolute;
      width: 100vw;
      height: 200%;
      --s1: radial-gradient(0.1vmin 0.1vmin at 50% 50%, #ffffff, #fff0);
      --s2: radial-gradient(0.2vmin 0.2vmin at 50% 50%, #ffffff, #fff0);
      background-image: var(--s1),var(--s1), var(--s1),var(--s2), var(--s2),var(--s1), var(--s2),var(--s1), var(--s2),var(--s1), var(--s2),var(--s1), var(--s2),var(--s1), var(--s1),var(--s2), var(--s2),var(--s1), var(--s1),var(--s2), var(--s1),var(--s1);
      background-repeat: repeat-x;
      background-size: 26% 25%, 43.33% 33.33%, 50% 80%, 20% 20%, 33.33% 75.33%, 26% 73%, 39.33% 22%, 33.33% 26%, 31% 32%, 14.33% 35.33%, 18.33% 62.33%, 39.33% 86.33%, 29.33% 69%, 12.33% 30.33%, 29.33% 41.33%, 22.33% 46.33%, 35.33% 27.33%, 22.33% 39.33%, 20.33% 44.33%, 33.33% 56.33%;
      filter: drop-shadow(0px 0px 2px #fff) drop-shadow(0px 0px 5px #fff);
      background-position: -8% -10%;
      transform: translateZ(-100vmin);
      transition: all 3s var(--cbz) 0s;
      top: -16vmin;
      animation: start-stars 3s var(--cbz) 0s 1;
    }

这里我们给了两个不同的界面，黑夜和白天。如果有同学将这段代码沾进编辑器会发现出现的只有黑夜，点烂了切换按钮也不会变成白天。这是背景这会和按钮并没有关联起来，添加下面代码将它们关联。


    input#day-night:checked ~ .content:before {
      background-position: 0% 90%;
      transition: all 3s var(--cbz) 0s;
    }

    input#day-night:checked ~ .content:after {
      top: -100%;
      transition: all 3s var(--cbz) 0s;
    }

这个时候整体看起来就好多了。
在这里插入图片描述

看起来还是有点诡异，明晃晃的天上竟然没有太阳！我的天，这是搞神嘛！

别急，太阳会来的，月亮也会~

搞一个太阳和月亮和简简单单的animation动画:

  <div class="moon-sun"></div>

再加上css代码：


    .moon-sun {
      position: absolute;
      width: 18vmin;
      height: 18vmin;
      bottom: 70vmin;
      margin-left: 90vmin;
      border-radius: 100%;
      background-repeat: no-repeat;
      animation: change-sm 3s var(--cbz) 0s 1;
      animation-fill-mode: forwards;
      background: radial-gradient(circle at 45% 55%, #fff -13%, yellow 35%, orange 90%, #fff0 90%);
      box-shadow: 0 0 6em 3em #ff9800, 0 0 8em 0 #ff9800 inset, 0 0 20px 5px #fdfdfd;
      --moon:
              radial-gradient( circle at 26% 71%, #ffffff 8%, #fff0 12% ),
              radial-gradient( circle at 23% 75%, #ccc 0% 1%, #fff0 10% ),
              radial-gradient( circle at 14% 42%, #fdfdfd 7%, #fff0 11% ),
              radial-gradient( circle at 12% 45%, #ccc 0%, #fff0 7% ),
              radial-gradient( circle at 23% 57%, #f9f9f9 2%, #fff0 6% ),
              radial-gradient( circle at 22% 58%, #ccc -2%, #fff0 4% ),
              radial-gradient(circle at 83% 25%, #fff0 10vmin, #fff calc(10vmin + 1px));
      filter: drop-shadow(0px 1px 6vmin #6493a9) drop-shadow(0px 1px 6vmin #fdfdfd);
    }

    input#day-night:checked ~ .content .moon-sun {
      animation: change-ms 3s var(--cbz) 0s 1 reverse;
      animation-fill-mode: forwards;
    }

这样搞了之后还是有点奇怪，为什么呢？因为…
在这里插入图片描述

嗯,仔细看一下代码,发现缺少两个月亮的关键帧,加上~

    /*月亮*/
    @keyframes change-sm {
      0% { bottom: 70vmin; }
      45%, 55% { bottom: -35vmin; }
      49% { background: #ffeb3b; filter: drop-shadow(0px 1px 6vmin #ff9800) drop-shadow(0px 1px 6vmin #fdfdfd); }
      50% {  background: var(--moon); }
      100% { bottom: 70vmin;  background: var(--moon);filter: drop-shadow(0px 1px 6vmin #6493a9) drop-shadow(0px 1px 6vmin #fdfdfd); box-shadow: none; }
    }

    /*月亮落下*/
    @keyframes change-ms {
      0% { bottom: 70vmin; }
      45%, 55% { bottom: -35vmin; }
      49% { background: #ffeb3b; filter: drop-shadow(0px 1px 6vmin #ff9800) drop-shadow(0px 1px 6vmin #fdfdfd); }
      50% {  background: var(--moon); }
      100% { bottom: 70vmin;  background: var(--moon);filter: drop-shadow(0px 1px 6vmin #6493a9) drop-shadow(0px 1px 6vmin #fdfdfd); box-shadow: none; }
    }

在这里插入图片描述
月亮出来了,世界得救了~~

下来,我们再搞点云来~

  <div class="clouds"></div>

  .clouds {
      position: absolute;
      top: 75vh;
      width: 100vw;
      height: 100%;
      background: radial-gradient(ellipse at 10% 23%, #fff1 4vmin, #fff0 15vmin),radial-gradient(ellipse at 0% 15%, #fff1 4vmin, #fff0 8vmin), radial-gradient(circle at 6% 17%, #fff1 4vmin, #fff0 8vmin), radial-gradient(ellipse at 4% 16%, #fff1 1vmin, #fff0 5vmin), radial-gradient(circle at 9% 16%, #fff1 1vmin, #fff0 5vmin), radial-gradient(ellipse at 12% 18%, #fff1 1vmin, #fff0 5vmin), radial-gradient(circle at 17% 19%, #fff1 2vmin, #fff0 6vmin), radial-gradient(ellipse at 13% 13%, #fff1 1vmin, #fff0 6vmin), radial-gradient(ellipse at 22% 20%, #fff1 2vmin, #fff0 8vmin), radial-gradient(circle at 4% 22%, #fff1 0vmin, #fff0 4vmin), radial-gradient(circle at 7% 24%, #fff1 0vmin, #fff0 4vmin), radial-gradient(ellipse at 10% 22%, #fff1 0vmin, #fff0 4vmin), radial-gradient(circle at 30% 19%, #fff2 0vmin, #fff0 13vmin), radial-gradient(circle at 26% 13%, #fff1 0vmin, #fff0 4vmin), radial-gradient(circle at 33% 15%, #fff1 -3vmin, #fff0 7vmin), radial-gradient(circle at 45% 19%, #fff1 4vmin, #fff0 14vmin), radial-gradient(circle at 38% 20%, #fff1 -3vmin, #fff0 7vmin), radial-gradient(circle at 52% 20%, #fff1 0vmin, #fff0 6vmin), radial-gradient(circle at 56% 15%, #fff1 0vmin, #fff0 7vmin), radial-gradient(circle at 58% 18%, #fff1 0vmin, #fff0 7vmin), radial-gradient(circle at 41% 26%, #fff1 2vmin, #fff0 8vmin), radial-gradient(circle at 60% 15%, #fff1 0vmin, #fff0 7vmin), radial-gradient(circle at 63% 12%, #fff1 0vmin, #fff0 7vmin), radial-gradient(circle at 63% 21%, #fff1 4vmin, #fff0 15vmin), radial-gradient(circle at 60% 25%, #fff1 2vmin, #fff0 7vmin), radial-gradient(ellipse at 63% 20%, #fff1 0vmin, #fff0 7vmin), radial-gradient(circle at 71% 25%, #fff1 2vmin, #fff0 9vmin), radial-gradient(ellipse at 84% 22%, #fff1 -1vmin, #fff0 8vmin), radial-gradient(ellipse at 78% 25%, #fff1 -1vmin, #fff0 10vmin), radial-gradient(ellipse at 90% 18%, #fff1 -1vmin, #fff0 10vmin), radial-gradient(ellipse at 93% 17%, #fff1 2vmin, #fff0 11vmin), radial-gradient(circle at 79% 17%, #fff1 -3vmin, #fff0 7vmin), radial-gradient(ellipse at 73% 12%, #fff1 -3vmin, #fff0 6vmin), radial-gradient(ellipse at 68% 15%, #fff1 -2vmin, #fff0 9vmin), radial-gradient(ellipse at 95% 25%, #fff1 -2vmin, #fff0 9vmin), radial-gradient(ellipse at 98% 26%, #fff1 -2vmin, #fff0 9vmin), radial-gradient(ellipse at 90% 23%, #fff1 -2vmin, #fff0 9vmin);
      transform: translateZ(-100vmin);
      transition: all 3s var(--cbz) 0s;
      opacity: 0.6;
    }

    .clouds span {
      opacity: 0;
    }

看看效果:
在这里插入图片描述

完美,下来就差房子了.房子比较复杂一些,我们先写一个形状出来

  <div class="cuboid floor one">
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
  </div>

  .cuboid {
      --width: 20;
      --depth: 20;
      --height: 20;
      --hue: 235;
      --sat: 25%;
      height: calc(var(--height) * 1vmin);
      width: calc(var(--width) * 1vmin);
      position: absolute;
      transform: rotateY(-8deg) rotateX(5deg) translateZ(-24vmin);
    }

    .cuboid .side {
      position: absolute;
      top: 50%;
      left: 50%;
      height: 100%;
      width: 100%;
      border-radius: 1px;
    }


    .cuboid .side:nth-of-type(1) {
      --sat: 40%;
      transform: translate3d(-50%, -50%, calc(var(--depth) * 0.5vmin));
      background: hsl(var(--hue), var(--sat), 18%);
    }
    .cuboid .side:nth-of-type(2) {
      transform: translate3d(-50%, -50%, calc(var(--depth) * -0.5vmin))
      rotateY(180deg);
      background: hsl(var(--hue), var(--sat), 35%);
    }
    .cuboid .side:nth-of-type(3) {
      width: calc(var(--depth) * 1vmin);
      transform: translate(-50%, -50%) rotateY(90deg)
      translate3d(0, 0, calc(var(--width) * 0.5vmin));
      background: hsl(var(--hue), var(--sat), 35%);
    }
    .cuboid .side:nth-of-type(4) {
      width: calc(var(--depth) * 1vmin);
      transform: translate(-50%, -50%) rotateY(-90deg)
      translate3d(0, 0, calc(var(--width) * 0.5vmin));
      background: hsl(var(--hue), var(--sat), 40%);
    }
    .cuboid .side:nth-of-type(5) {
      --sat: 60%;
      height: calc(var(--depth) * 1vmin);
      transform: translate(-50%, -50%) rotateX(90deg)
      translate3d(0, 0, calc(var(--height) * 0.5vmin));
      background: hsl(var(--hue), var(--sat), 10%);
    }
    .cuboid .side:nth-of-type(6) {
      --sat: 60%;
      height: calc(var(--depth) * 1vmin);
      transform: translate(-50%, -50%) rotateX(-90deg)
      translate3d(0, 0, calc(var(--height) * 0.5vmin));
      background: hsl(var(--hue), var(--sat), 10%);
    }

看看效果:
在这里插入图片描述
下来我们给它加上屋顶和窗子:

  <div class="cuboid roof one">
    <div class="side"><i class="cactus"></i></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
  </div>

在小小的修饰一下:

加上一个仙人掌:

    i.cactus {
      background: var(--bush);
      width: 0.85vmin;
      height: 2vmin;
      position: absolute;
      bottom: 3vmin;
      left: 3px;
      border-radius: 100% 100% 10% 45%;
      transform: rotate(-2deg);
    }

    i.cactus:before {
      content: "";
      position: absolute;
      background: var(--bush);
      width: 0.75vmin;
      height: 2vmin;
      bottom: 1.4vmin;
      left: -0.35vmin;
      border-radius: 100%;
    }

    i.cactus:after {
      content: "";
      position: absolute;
      background: var(--bush);
      width: 0.5vmin;
      height: 1.5vmin;
      bottom: 3vmin;
      left: 0.075vmin;
      border-radius: 100%;
      box-shadow: -0.6vmin 0.2vmin 0 -0.075vmin var(--bush), 0.4vmin 1.5vmin 0 -0.075vmin var(--bush);
    }

加上百叶窗,让它变得像个房子:

      .floor .side:nth-of-type(1):before, .floor .side:nth-of-type(1):after,
    .floor .side:nth-of-type(3):before, .floor .side:nth-of-type(3):after {
      position: absolute;
      content: "";
      width: 40%;
      height: 100%;
      left: 20%;
      background: repeating-linear-gradient(180deg, #101010, transparent), repeating-linear-gradient(90deg, #383e70 0 calc(100% - 0.25vmin), var(--frame) calc(100% - 0.25vmin) 100%);
      background-size: 100% 0.365vmin, 8vmin 100%;
    }
    .floor .side:nth-of-type(1):after {
      width: 20%;
      left: 80.25%;

    }

再加上地板和玻璃窗子:


 .floor {
      --width: 40;
      --depth: 89;
      --height: 8;
      bottom: -5vmin;
      left: 16vmin;
      --lines-front: repeating-linear-gradient(90deg, var(--luz1) 0% calc(100% - 0.275vmin), var(--frame) calc(100% - 0.275vmin) 100%);
      --lines-side: repeating-linear-gradient(90deg, var(--luz1) 0% calc(100% - 1.5vmin), var(--frame) calc(100% - 1.5vmin) 100%);
    }

    .floor .side { border: 3px solid var(--frame); }

    .floor.two { bottom: 5vmin; }
    .floor.three { bottom: 15vmin; }
    .floor.four { bottom: 25vmin; }
    .floor.five { bottom: 35vmin; }
    .floor.six { bottom: 45vmin; }
    .floor.seven { bottom: 55vmin; }
    .floor.eight { bottom: 65vmin; }

    .floor .side:nth-of-type(1) {
      background:
              conic-gradient(from 116deg at 0 0, var(--luz2) 0 25%, #fff0 0 100%),
              linear-gradient(31deg, #fff0 60%, var(--luz2) 61%),
              linear-gradient(31deg, #fff0 20%, var(--luz2) 21%),
              linear-gradient(31deg, var(--luz1) 65%, var(--luz2) 21%),
              linear-gradient(90deg, var(--luz1) 19.5%, #fff0 19.5% 20%, var(--luz1) 20.5% 39.5%, #fff0 40% 61%, var(--luz3) 61% 80.25%, #fff0 80% 81%, var(--luz2) 81% 100%);
      background-size: 2.5% 51%, 19.5% 100%, 19.5% 100%, 19.5% 100%, 100% 100%;
      background-repeat: no-repeat;
      background-position: 79.75% 100%, 0 0, 25% 0, 75.4% 0, 0 0;
    }

    .floor .side:nth-of-type(3) {
      background: var(--lines-side), hsl(var(--hue) var(--sat) 75% / 0.5);
      background-size: 35.45% 100%;
    }

    .floor .side:nth-of-type(4) {
      background: var(--lines-side), hsl(var(--hue) var(--sat) 40% / 0.5);
      background-size: 35.45% 100%;
    }
 span {
      background: linear-gradient(32deg, #fff0 17%, var(--luz2) 19%), var(--luz1);
      position: absolute;
      width: 20%;
      height: 100%;
      left: 20%;
    }

这个时候它是这样的:
在这里插入图片描述
已经有点样子,下面我们继续往上盖和加些小物件进去,花,空调,猫,人,屋子里的灯光等就可以.

完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日升月落动画+按钮</title>
  <style>
    @property --glass {
      syntax: '<angle>';
      inherits: false;
      initial-value: 337deg;
    }

    * {
      transform-style: preserve-3d;
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 0;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      --cbz: cubic-bezier(0.68, -0.55, 0.27, 1.55);
    }

    .content {
      --frame: #070b32;
      --bush: #181b38;
      --dot1: radial-gradient(circle at 50% 50%, var(--bush) 0 0.25vmin, #fff0 calc(0.25vmin + 1px) 100%);
      --dot2: radial-gradient(circle at 50% 50%, var(--bush) 0 0.5vmin, #fff0 calc(0.5vmin + 1px) 100%);
      --dot3: radial-gradient(circle at 50% 50%, var(--bush) 0 1.15vmin, #fff0 calc(1.15vmin + 1px) 100%);
      --glass: 337deg;
      --luz1: hsl(var(--glass) 60% 50% / 60%);
      --luz2: hsl(var(--glass) 54% 32%);
      --luz3: hsl(var(--glass) 54% 25%);
      transition: --glass 3s;
      width: 80vmin;
      height: 100vh;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      animation: start-glass 3s var(--cbz) 0s 1;
    }

    @keyframes start-glass {
      0% { --glass: 200deg; }
      100% { --glass: 337deg; }
    }

    .content:before {
      content: "";
      position: absolute;
      width: 100vw;
      height: 100%;
      background: linear-gradient(180deg, #000, #080212, #341c5e, #50587e, #0079d9, #39a7ff,  #70c6ed 100%);
      background-repeat: no-repeat;
      background-size:  100% 300%;
      background-position: 0% 10%;
      transform: translateZ(-100vmin);
      transition: all 3s var(--cbz) 0s;
      animation: start-bg 3s var(--cbz) 0s 1;
    }

    .content:after {
      content: "";
      position: absolute;
      width: 100vw;
      height: 200%;
      --s1: radial-gradient(0.1vmin 0.1vmin at 50% 50%, #ffffff, #fff0);
      --s2: radial-gradient(0.2vmin 0.2vmin at 50% 50%, #ffffff, #fff0);
      background-image: var(--s1),var(--s1), var(--s1),var(--s2), var(--s2),var(--s1), var(--s2),var(--s1), var(--s2),var(--s1), var(--s2),var(--s1), var(--s2),var(--s1), var(--s1),var(--s2), var(--s2),var(--s1), var(--s1),var(--s2), var(--s1),var(--s1);
      background-repeat: repeat-x;
      background-size: 26% 25%, 43.33% 33.33%, 50% 80%, 20% 20%, 33.33% 75.33%, 26% 73%, 39.33% 22%, 33.33% 26%, 31% 32%, 14.33% 35.33%, 18.33% 62.33%, 39.33% 86.33%, 29.33% 69%, 12.33% 30.33%, 29.33% 41.33%, 22.33% 46.33%, 35.33% 27.33%, 22.33% 39.33%, 20.33% 44.33%, 33.33% 56.33%;
      filter: drop-shadow(0px 0px 2px #fff) drop-shadow(0px 0px 5px #fff);
      background-position: -8% -10%;
      transform: translateZ(-100vmin);
      transition: all 3s var(--cbz) 0s;
      top: -16vmin;
      animation: start-stars 3s var(--cbz) 0s 1;
    }


    input#day-night:checked ~ .content:before {
      background-position: 0% 90%;
      transition: all 3s var(--cbz) 0s;
    }

    input#day-night:checked ~ .content:after {
      top: -100%;
      transition: all 3s var(--cbz) 0s;
    }

    @keyframes start-stars {
      0% { top: -100%; }
      100% { top: 0%; }
    }

    @keyframes start-bg {
      0% { background-position: 0% 90%; }
      100% { background-position: 0% 10%; }
    }

    .moon-sun {
      position: absolute;
      width: 18vmin;
      height: 18vmin;
      bottom: 70vmin;
      margin-left: 90vmin;
      border-radius: 100%;
      background-repeat: no-repeat;
      animation: change-sm 3s var(--cbz) 0s 1;
      animation-fill-mode: forwards;
      background: radial-gradient(circle at 45% 55%, #fff -13%, yellow 35%, orange 90%, #fff0 90%);
      box-shadow: 0 0 6em 3em #ff9800, 0 0 8em 0 #ff9800 inset, 0 0 20px 5px #fdfdfd;
      --moon:
              radial-gradient( circle at 26% 71%, #ffffff 8%, #fff0 12% ),
              radial-gradient( circle at 23% 75%, #ccc 0% 1%, #fff0 10% ),
              radial-gradient( circle at 14% 42%, #fdfdfd 7%, #fff0 11% ),
              radial-gradient( circle at 12% 45%, #ccc 0%, #fff0 7% ),
              radial-gradient( circle at 23% 57%, #f9f9f9 2%, #fff0 6% ),
              radial-gradient( circle at 22% 58%, #ccc -2%, #fff0 4% ),
              radial-gradient(circle at 83% 25%, #fff0 10vmin, #fff calc(10vmin + 1px));
      filter: drop-shadow(0px 1px 6vmin #6493a9) drop-shadow(0px 1px 6vmin #fdfdfd);
    }

    input#day-night:checked ~ .content .moon-sun {
      animation: change-ms 3s var(--cbz) 0s 1 reverse;
      animation-fill-mode: forwards;
    }

    /*月亮*/
    @keyframes change-sm {
      0% { bottom: 70vmin; }
      45%, 55% { bottom: -35vmin; }
      49% { background: #ffeb3b; filter: drop-shadow(0px 1px 6vmin #ff9800) drop-shadow(0px 1px 6vmin #fdfdfd); }
      50% {  background: var(--moon); }
      100% { bottom: 70vmin;  background: var(--moon);filter: drop-shadow(0px 1px 6vmin #6493a9) drop-shadow(0px 1px 6vmin #fdfdfd); box-shadow: none; }
    }

    /*月亮落下*/
    @keyframes change-ms {
      0% { bottom: 70vmin; }
      45%, 55% { bottom: -35vmin; }
      49% { background: #ffeb3b; filter: drop-shadow(0px 1px 6vmin #ff9800) drop-shadow(0px 1px 6vmin #fdfdfd); }
      50% {  background: var(--moon); }
      100% { bottom: 70vmin;  background: var(--moon);filter: drop-shadow(0px 1px 6vmin #6493a9) drop-shadow(0px 1px 6vmin #fdfdfd); box-shadow: none; }
    }

    /* 长方体 */
    .cuboid {
      --width: 20;
      --depth: 20;
      --height: 20;
      --hue: 235;
      --sat: 25%;
      height: calc(var(--height) * 1vmin);
      width: calc(var(--width) * 1vmin);
      position: absolute;
      transform: rotateY(-8deg) rotateX(5deg) translateZ(-24vmin);
    }

    .cuboid .side {
      position: absolute;
      top: 50%;
      left: 50%;
      height: 100%;
      width: 100%;
      border-radius: 1px;
    }

    .cuboid .side:nth-of-type(1) {
      --sat: 40%;
      transform: translate3d(-50%, -50%, calc(var(--depth) * 0.5vmin));
      background: hsl(var(--hue), var(--sat), 18%);
    }
    .cuboid .side:nth-of-type(2) {
      transform: translate3d(-50%, -50%, calc(var(--depth) * -0.5vmin))
      rotateY(180deg);
      background: hsl(var(--hue), var(--sat), 35%);
    }
    .cuboid .side:nth-of-type(3) {
      width: calc(var(--depth) * 1vmin);
      transform: translate(-50%, -50%) rotateY(90deg)
      translate3d(0, 0, calc(var(--width) * 0.5vmin));
      background: hsl(var(--hue), var(--sat), 35%);
    }
    .cuboid .side:nth-of-type(4) {
      width: calc(var(--depth) * 1vmin);
      transform: translate(-50%, -50%) rotateY(-90deg)
      translate3d(0, 0, calc(var(--width) * 0.5vmin));
      background: hsl(var(--hue), var(--sat), 40%);
    }
    .cuboid .side:nth-of-type(5) {
      --sat: 60%;
      height: calc(var(--depth) * 1vmin);
      transform: translate(-50%, -50%) rotateX(90deg)
      translate3d(0, 0, calc(var(--height) * 0.5vmin));
      background: hsl(var(--hue), var(--sat), 10%);
    }
    .cuboid .side:nth-of-type(6) {
      --sat: 60%;
      height: calc(var(--depth) * 1vmin);
      transform: translate(-50%, -50%) rotateX(-90deg)
      translate3d(0, 0, calc(var(--height) * 0.5vmin));
      background: hsl(var(--hue), var(--sat), 10%);
    }

    /* 地板 */
    .floor {
      --width: 40;
      --depth: 89;
      --height: 8;
      bottom: -5vmin;
      left: 16vmin;
      --lines-front: repeating-linear-gradient(90deg, var(--luz1) 0% calc(100% - 0.275vmin), var(--frame) calc(100% - 0.275vmin) 100%);
      --lines-side: repeating-linear-gradient(90deg, var(--luz1) 0% calc(100% - 1.5vmin), var(--frame) calc(100% - 1.5vmin) 100%);
    }
    .floor .side { border: 3px solid var(--frame); }
    .floor.two { bottom: 5vmin; }
    .floor.three { bottom: 15vmin; }
    .floor.four { bottom: 25vmin; }
    .floor.five { bottom: 35vmin; }
    .floor.six { bottom: 45vmin; }
    .floor.seven { bottom: 55vmin; }
    .floor.eight { bottom: 65vmin; }

    .floor .side:nth-of-type(1) {
      background:
              conic-gradient(from 116deg at 0 0, var(--luz2) 0 25%, #fff0 0 100%),
              linear-gradient(31deg, #fff0 60%, var(--luz2) 61%),
              linear-gradient(31deg, #fff0 20%, var(--luz2) 21%),
              linear-gradient(31deg, var(--luz1) 65%, var(--luz2) 21%),
              linear-gradient(90deg, var(--luz1) 19.5%, #fff0 19.5% 20%, var(--luz1) 20.5% 39.5%, #fff0 40% 61%, var(--luz3) 61% 80.25%, #fff0 80% 81%, var(--luz2) 81% 100%);
      background-size: 2.5% 51%, 19.5% 100%, 19.5% 100%, 19.5% 100%, 100% 100%;
      background-repeat: no-repeat;
      background-position: 79.75% 100%, 0 0, 25% 0, 75.4% 0, 0 0;
    }

    .floor .side:nth-of-type(3) {
      background: var(--lines-side), hsl(var(--hue) var(--sat) 75% / 0.5);
      background-size: 35.45% 100%;
    }

    .floor .side:nth-of-type(4) {
      background: var(--lines-side), hsl(var(--hue) var(--sat) 40% / 0.5);
      background-size: 35.45% 100%;
    }


    /* 屋顶 */
    .roof {
      --height: 3;
      --width: 42;
      --depth: 100;
      bottom: 3vmin;
      left: 16vmin;
      transform: rotateY(-8deg) rotateX(5deg)  translateZ(-18vmin);
    }
    .roof.two { bottom: 13vmin; }
    .roof.three { bottom: 23vmin; }
    .roof.four { bottom: 33vmin; }
    .roof.five { bottom: 43vmin; }
    .roof.six { bottom: 53vmin; }
    .roof.seven { bottom: 63vmin; }
    .roof.eight { bottom: 73vmin; }

    /* 空调 */
    .air-cooler {
      --height: 3.9;
      --width: 10;
      --depth: 52;
      bottom: 78.5vmin;
      left: 25vmin;
    }

    .air-cooler + .air-cooler {
      --height: 2.4;
      --width: 5;
      --depth: 20;
      bottom: 78.5vmin;
      left: 42vmin;
      transform: rotateY(-8deg) rotateX(5deg) translateZ(-7vmin);
    }

    .air-cooler .side:nth-of-type(1) {
      border: 1px solid #0002;
    }

    .air-cooler .side:nth-of-type(1):before {
      content: "";
      width: calc(100% - 1vmin);
      height: calc(100% - 1vmin);
      position: absolute;
      background: repeating-linear-gradient(180deg, #000, #0a0d29 , #434770cc);
      margin: 0.5vmin;
      background-size: 100% 25%;
    }

    /* 窗子 */
    span {
      background: linear-gradient(32deg, #fff0 17%, var(--luz2) 19%), var(--luz1);
      position: absolute;
      width: 20%;
      height: 100%;
      left: 20%;
    }

    /* F 2 */
    .floor.two .side span:before ,
    .floor.five .side span:before {
      content: "";
      position: absolute;
      width: calc(100% + 2px);
      height: 30%;
      top: -1px;
      left: -1px;
      background: repeating-linear-gradient(180deg, black, #383e70);
      background-size: 100% 0.35vmin;
      box-shadow: 0.01vmin 0.75vmin 0.15vmin 0.125vmin #0005 inset;
    }

    /* 百叶窗*/
    .floor .side:nth-of-type(1):before, .floor .side:nth-of-type(1):after,
    .floor .side:nth-of-type(3):before, .floor .side:nth-of-type(3):after {
      position: absolute;
      content: "";
      width: 40%;
      height: 100%;
      left: 20%;
      background: repeating-linear-gradient(180deg, #101010, transparent), repeating-linear-gradient(90deg, #383e70 0 calc(100% - 0.25vmin), var(--frame) calc(100% - 0.25vmin) 100%);
      background-size: 100% 0.365vmin, 8vmin 100%;
    }
    .floor .side:nth-of-type(1):after {
      width: 20%;
      left: 80.25%;

    }

    /* F 1 */
    .floor.one .side:nth-of-type(1):before,
    .floor.one .side:nth-of-type(1):after {
      box-shadow: 0vmin 0.65vmin 0.25vmin 0.25vmin #0006 inset;
    }
    .floor.one .side:nth-of-type(1):after {
      box-shadow: 0vmin 0.65vmin 0.25vmin 0.25vmin #0006 inset, -7.75vmin 0 0 0 #0a0a0a;
    }

    /* F 2 */
    .floor.two .side:nth-of-type(1):before {
      width: 59.5%;
      left: 40.75%;
      box-shadow: 0.2vmin 0.5vmin 0.25vmin 0.25vmin #0006 inset;
    }
    .floor.two .side:nth-of-type(1):after {
      width: 20%;
      left: -1px;
      box-shadow: none;
      box-shadow: 0vmin 0.65vmin 0.25vmin 0.25vmin #0006 inset;
      background-color: #3d4176;
    }

    /* F 3 */
    .floor.three .side:nth-of-type(1):after {
      background: #1c1f3e;
      left: 40.25%;
      width: 19.75%;
      box-shadow: 0.2vmin 0.525vmin 0.5vmin 0.125vmin #0006 inset;
    }

    .floor.three .side:nth-of-type(1):before {
      display: none;
    }

    /* F 4 */
    .floor.four .side:nth-of-type(1):before,
    .floor.eight .side:nth-of-type(1):before {
      position: absolute;
      content: "";
      width: 60%;
      height: 100%;
      left: 40%;
      --luz1: #434770;
      --lines-front: repeating-linear-gradient(90deg, var(--luz1) 0% calc(100% - 0.275vmin), var(--frame) calc(100% - 0.275vmin) 100%);
      background: repeating-linear-gradient(90deg, black, transparent), linear-gradient(91deg, #fff0 35%, #000 calc(36% + 1px) 52%, #fff0 52%), linear-gradient(-91deg, #fff0 36%, #000 calc(37% + 1px) 55%, #fff0 55%), var(--lines-front), repeating-linear-gradient(90deg, #364e69, #141f59);
      background-size: 0.35vmin 100%, 100% 100%, 100% 100%, 33.6% 100%, 4% 100%;
      z-index: 1;
    }

    .floor.four .side:nth-child(1):after {
      box-shadow: 0.05vmin 0.7vmin 0.25vmin 0.125vmin #0006 inset, 7.5vmin -7.3vmin 0 0 #0a0d29;
      left: -1px;
      width: 81%;
    }

    .floor.four .side:nth-of-type(1):before {
      background: repeating-linear-gradient(90deg, black, transparent), linear-gradient(94deg, #fff0 41%, #000 calc(42% + 1px) 52%, #fff0 52%), linear-gradient(-95deg, #fff0 45%, #000 calc(46% + 1px) 55%, #fff0 55%), var(--lines-front), repeating-linear-gradient(90deg, #364e69, #141f59);
      background-size: 0.375vmin 100%, 100% 100%, 100% 100%, 33.6% 100%, 4% 100%;
      left: 0;
    }

    .roof.four .side:nth-child(1):before {
      content: "";
      position: absolute;
      width: 25%;
      height: 3vmin;
      top: -3vmin;
      left: 25vmin;
      background: radial-gradient(circle at 13% 98%, var(--luz3) 0.5vmin, #fff0 calc(0.5vmin + 1px)), radial-gradient(circle at 11% 79%, var(--luz3) 0.25vmin, #fff0 calc(0.25vmin + 1px)), radial-gradient(circle at 16% 84%, var(--luz3) 0.125vmin, #fff0 calc(0.125vmin + 1px)), radial-gradient(circle at 21% 95%, var(--luz3) 0.25vmin, #fff0 calc(0.25vmin + 1px)), radial-gradient(circle at 25% 98%, var(--luz3) 0.25vmin, #fff0 calc(0.25vmin + 1px)), radial-gradient(circle at 28% 91%, var(--luz3) 0.175vmin, #fff0 calc(0.175vmin + 1px)), radial-gradient(circle at 30% 84%, var(--luz3) 0.175vmin, #fff0 calc(0.175vmin + 1px)), radial-gradient(circle at 10% 70%, var(--luz3) 0.175vmin, #fff0 calc(0.175vmin + 1px));
      background-repeat: no-repeat;
      filter: drop-shadow(2vmin 0vmin 0px var(--luz3)) drop-shadow(3vmin 0vmin 0px var(--luz3));
    }

    /* F 5 */
    .floor.five .side:nth-of-type(1):before {
      width: 19.25%;
      left: 40.75%;
    }

    .floor.five .side:nth-child(1) span:after {
      content: "";
      position: absolute;
      width: 2vmin;
      height: 2vmin;
      top: 4.85vmin;
      left: 29.7vmin;
      background: var(--luz3);
      background-size: 100% 0.35vmin;
      box-shadow: -2px -20.1vmin 0 0 var(--luz3);
      color: #601d44;
      z-index: 3;
      transform: translateZ(1.8vmin);
    }

    .floor.five .side:nth-of-type(1):after {
      display: none;
    }

    .roof.five .side:nth-child(-n+4):before {
      content: "";
      position: absolute;
      width: 100%;
      height: 3vmin;
      top: -3vmin;
      background: var(--dot3), var(--dot2), var(--dot1), var(--dot1), var(--dot1), var(--dot1), var(--dot1), var(--dot1);
      background-position: -16.2vmin 1.825vmin, -16.7vmin 0.5vmin, -15.72vmin 0.65vmin, -17.57vmin 0.5vmin, -17.2vmin 0.25vmin, -16.5vmin 0.1vmin , -17.4vmin 0.95vmin, -15.175vmin 0.95vmin;
      background-repeat: no-repeat;
      filter: drop-shadow(16px 0px 0px var(--bush)) drop-shadow(24vmin 0px 0px var(--bush)) drop-shadow(8vmin 0px 0px var(--bush));
    }

    /* F 6 */
    .floor.six .side:nth-of-type(1):before {
      left: -0.1vmin;
      box-shadow: 0.025vmin 0.7vmin 0.25vmin 0.125vmin #0006 inset;
      width: 40.25%;
      background: repeating-linear-gradient(90deg, #101010, transparent), repeating-linear-gradient(90deg, #383e70 0 calc(100% - 0.25vmin), var(--frame) calc(100% - 0.25vmin) 100%);
      background-size: 0.25vmin 100%, 8vmin 100%;
    }

    .floor.six .side:nth-of-type(1):after {
      left: 60%;
      width: 40%;
      background: repeating-linear-gradient(90deg, #101010, transparent), repeating-linear-gradient(90deg, #383e70 0 calc(100% - 0.25vmin), var(--frame) calc(100% - 0.25vmin) 100%);
      background-size: 0.25vmin 100%, 8vmin 100%;
    }

    .floor.six .side span {
      left: 40.5%;
      width: 19%;
      background: #0a0a0a;
    }

    /* F 7 */
    .floor.seven .side:nth-of-type(1):after {
      display: none;
    }

    .floor.seven .side:nth-of-type(1):before {
      box-shadow: 0.15vmin 0.65vmin 0.25vmin 0.125vmin #0006 inset;
    }

    /* F 8 */
    .floor.eight .side:nth-of-type(1):after {
      width: 60%;
      left: 40%;
      box-shadow: 0.025vmin 0.65vmin 0.5vmin 0.25vmin #0006 inset;
      background: repeating-linear-gradient(180deg, black, transparent);
      background-size: 100% 4%;
    }

    /* 右侧 */
    .floor .side:nth-of-type(3):before,
    .floor .side:nth-of-type(3):after{
      width: 33.95%;
      box-shadow: 0.025vmin 1.75vmin 0.4vmin 0.125vmin #0006 inset;
      background-size: 100% 0.365vmin, 33vmin 100%;
      filter: brightness(1.25);
    }

    /* F 1 */
    .floor.one .side:nth-of-type(3):before,
    .floor.two .side:nth-of-type(3):before {
      left: 0;
    }
    .floor.one .side:nth-of-type(3):after,
    .floor.two .side:nth-of-type(3):after {
      left: 35.25%;
    }

    /* F 2 */
    .floor.two .side:nth-of-type(3) span,
    .floor.four .side:nth-of-type(3) span {
      left: 71%;
      width: 29%;
      background: linear-gradient(-5deg, #fff0 76%, var(--luz2) calc(76% + 1px)), var(--luz1);
    }
    .floor.two .side:nth-of-type(3) span:before {
      width: 5vmin;
      bottom: 0.8vmin;
      top: inherit;
      background: var(--luz2);
      box-shadow: none;
      left: 10vmin;
    }

    /* F 3 */
    .floor.three .side:nth-of-type(3):before, .floor.three .side:nth-of-type(3):after {
      left: 70.75%;
      width: 29.25%;
    }

    .floor.three .side:nth-of-type(3) span {
      width: 69.5%;
      left: 0;
      background: #fff0;
    }

    .floor.three .side:nth-of-type(3) span:before,
    .floor.three .side:nth-of-type(3) span:after {
      content: "";
      position: absolute;
      width: 48.5%;
      height: 100%;
      left: 0;
      background: linear-gradient(175.25deg, var(--luz2) 51.5%, var(--luz3) calc(51.5% + 1px)), var(--luz1);
    }

    .floor.three .side:nth-of-type(3) span:after {
      left: 51%;
      background: linear-gradient(175.25deg, var(--luz2) 25%, var(--luz3) calc(25% + 1px)), var(--luz1);
    }

    /* F 4 */
    .floor.four .side:nth-of-type(3):before, .floor.four .side:nth-of-type(3):after {
      left: 35.25%;
      background: repeating-linear-gradient(90deg, #1d1e26, transparent), repeating-linear-gradient(90deg, #383e70 0 calc(100% - 0.25vmin), var(--frame) calc(100% - 0.25vmin) 100%);
      background-size: 2.5vmin 100%, 33vmin 100%;
    }

    .floor.four .side:nth-of-type(3):after {
      left: 0%;
      background: var(--luz3);
      box-shadow: none;
    }

    .floor.four .side:nth-of-type(3) span:before {
      content: "";
      position: absolute;
      width: 2vmin;
      bottom: -0.85vmin;
      border: 2.25vmin solid #fff0;
      border-left: 5.5vmin solid var(--luz2);
      border-top: 0.5vmin solid #fff0;
      left: 6.5vmin;
      height: 1vmin;
      border-radius: 100%;
      transform: rotate(-9deg);
      filter: drop-shadow(0px 2px 0px var(--luz2));
    }

    .floor.four .side:nth-of-type(3) span:after {
      content: "";
      position: absolute;
      width: 3.5vmin;
      bottom: 2.55vmin;
      background: var(--luz2);
      left: 12.02vmin;
      height: 0.65vmin;
      border-radius: 100%;
    }

    /* F 5 */
    .floor.five .side:nth-of-type(3):before,
    .floor.seven .side:nth-of-type(3):before {
      left: 35.25%;
      width: 34.25%;
      top: -1px;
      background: #2c315a;
      box-shadow: -1.975vmin 1.75vmin 1.5vmin 0.125vmin #0005 inset, 0.025vmin 1.75vmin 0.4vmin 0.125vmin #0002 inset;
    }

    .floor.five .side:nth-of-type(3):after,
    .floor.seven .side:nth-of-type(3):after {
      left: 70.75%;
      width: 29.25%;
      top: -1px;
      background: #2c315a;
      box-shadow: -1.975vmin 1.75vmin 1.5vmin 0.125vmin #0005 inset, 0.025vmin 1.75vmin 0.4vmin 0.125vmin #0002 inset;
    }

    .roof.five .side:nth-child(3):before {
      filter: drop-shadow(3vmin 0px 0px var(--bush)) drop-shadow(6vmin 0px 0px var(--bush))  drop-shadow(10vmin 0px 0px var(--bush)) drop-shadow(-30vmin 0px 0px var(--bush))  drop-shadow(30vmin 1px 0px var(--bush)) drop-shadow(25px -2px 0px var(--bush)) drop-shadow(25px 0px 0px var(--bush));
    }

    .floor.five .side:nth-of-type(3) span,
    .floor.seven .side:nth-of-type(3) span {
      left: 0%;
      width: 33.5%;
      background: conic-gradient(from 180deg at 70% 40%, var(--luz3) 0 23.65%,  var(--luz2) 0 100% );
    }

    .floor.five .side:nth-of-type(3) span:before {
      display: none;
      left: 0%;
      bottom: 2vmin;
      top: inherit;
      width: 66%;
      background: var(--luz3);
      box-shadow: none;
    }

    /* F 6 */
    .floor.six .side:nth-of-type(3):before,
    .floor.six .side:nth-of-type(3):after  {
      left: 0;
      background: repeating-linear-gradient(90deg, #1d1e26, transparent), repeating-linear-gradient(90deg, #383e70 0 calc(100% - 0.25vmin), var(--frame) calc(100% - 0.25vmin) 100%);
      background-size: 1.85vmin 100%, 33vmin 100%;
    }

    .floor.six .side:nth-of-type(3):after {
      left: 35.25%;
    }

    /* F 8 */
    .floor.eight .side:nth-of-type(3):before {
      left: 0;
      background: repeating-linear-gradient(90deg, #101010, transparent), repeating-linear-gradient(90deg, #383e70 0 calc(100% - 0.25vmin), var(--frame) calc(100% - 0.25vmin) 100%);
      background-size: 2.55vmin 100%, 33vmin 100%;
    }

    .floor.eight .side:nth-of-type(3):after {
      left: 64vmin;
      bottom: -19.85vmin;
      width: 29.65%;
      background: repeating-linear-gradient(90deg, #1d1e26, transparent), repeating-linear-gradient(90deg, #383e70 0 calc(100% - 0.25vmin), var(--frame) calc(100% - 0.25vmin) 100%);
      background-size: 1.85vmin 100%, 33vmin 100%;
    }

    .floor.eight .side:nth-of-type(3) span {
      width: 66%;
      left: 36%;
      background: linear-gradient(32deg, #fff0 17%, var(--luz2) 19%), var(--luz1);
      background: #fff0;
      background: radial-gradient(ellipse at 30% 72%, var(--luz2) 2.5vmin, #fff0 3.5vmin), radial-gradient(circle at 30% 72%, var(--luz2) 1vmin, #fff0 1vmin), radial-gradient(circle at 34% 73%, var(--luz2) 1vmin, #fff0 1vmin), radial-gradient(circle at 32% 75%, var(--luz2) 1vmin, #fff0 1vmin), radial-gradient(circle at 25% 75%, var(--luz2) 1vmin, #fff0 1vmin), radial-gradient(circle at 21% 80%, var(--luz2) 1vmin, #fff0 1vmin), radial-gradient(ellipse at 73% 72%, var(--luz2) 3.5vmin, #fff0 4.5vmin), radial-gradient(circle at 69% 70%, var(--luz2) 1vmin, #fff0 1vmin), radial-gradient(circle at 75% 73%, var(--luz2) 1vmin, #fff0 1vmin), radial-gradient(circle at 65% 75%, var(--luz2) 1vmin, #fff0 1vmin), radial-gradient(circle at 82% 75%, var(--luz2) 1vmin, #fff0 1vmin), radial-gradient(circle at 78% 74%, var(--luz2) 1vmin, #fff0 1vmin);
      background-repeat: no-repeat;
    }

    .floor.eight .side:nth-of-type(3) span:before, .floor.eight .side:nth-of-type(3) span:after {
      content: "";
      position: absolute;
      width: 50.75%;
      height: 100%;
      left: -5px;
      background: linear-gradient(-5deg, #fff0 48.5%, var(--luz2) calc(48.5% + 1px));
    }

    .floor.eight .side:nth-of-type(3) span:after {
      content: "";
      position: absolute;
      width: 43%;
      height: 100%;
      left: 53%;
      background: linear-gradient(-5deg, #fff0 75%, var(--luz2) calc(75% + 1px));
    }

    /* 人 */
    i.man {
      background: radial-gradient(circle at 50% 0.4vmin, var(--bush) 0 0.35vmin, #fff0 calc(0.35vmin + 1px) 100%),radial-gradient(circle at 50% 0.35vmin, #0c0d1c 0 0.35vmin, #fff0 calc(0.35vmin + 1px) 100%), conic-gradient(from 137deg at 50% 0.51vmin, var(--bush) 0 25%, #fff0 0 100%);
      width: 1.5vmin;
      height: 3.5vmin;
      position: absolute;
      bottom: 1.25vmin;
      left: 10.5vmin;
      z-index: 1;
      transform: rotate(-1deg);
      border-radius: 1vmin 100% 0 0;
    }

    i.man:before {
      content: "";
      background: var(--bush);
      width: 1vmin;
      height: 1vmin;
      border-radius: 0.3vmin;
      position: absolute;
      bottom: 1.25vmin;
      left: -0.25vmin;
      transform: rotate(55deg);
    }

    i.man:after {
      content: "";
    }

    .eight .side i.man {
      left: 39.75vmin;
      bottom: 0vmin;
      --bush: #363a5c;
      transform: translateZ(-90vmin);
      filter: drop-shadow(1.2px 0px 0px #7d83bfcc);
      color: #7d83bfcc;
      background: radial-gradient(circle at 55% 0.9vmin, var(--bush) 0 0.35vmin, #fff0 calc(0.375vmin + 1px) 100%),radial-gradient(circle at 35% 0.8vmin, #0a0d29 0 0.5vmin, #fff0 calc(0.5vmin + 1px) 100%), conic-gradient(from 145deg at 50% 1.2vmin, var(--bush) 0 25%, #fff0 0 100%);
      height: 4.5vmin;
      width: 1.125vmin;
    }

    .eight .side i.man:before {
      transform: rotate(-19deg);
      border-right: 1px solid #ffffffab;
      left: 0.125vmin;
      width: 0.45vmin;
      height: 1.85vmin;
      background: var(--frame);
      opacity: 0.5;
      bottom: 1.125vmin;
    }

    /* 猫 */
    i.cat {
      background: radial-gradient(circle at 50% 26%, var(--bush) 0 0.35vmin, #fff0 calc(0.35vmin + 1px) 100%), conic-gradient(from 125deg at 100% 0, var(--bush) 0 25%, #fff0 0 100%), conic-gradient(from 136deg at 0 0, var(--bush) 0 25%, #fff0 0 100%);
      width: 0.75vmin;
      height: 2.5vmin;
      position: absolute;
      bottom: 1.25vmin;
      left: 2.3vmin;
      transform: scale(0.85);
    }

    i.cat:before {
      content: "";
      background: var(--bush);
      width: 1.8vmin;
      height: 1.95vmin;
      border-radius: 100% 39% 0 0;
      position: absolute;
      bottom: -0.35vmin;
      left: -1vmin;
    }

    i.cat:after {
      content: "";
      background: #fff0;
      width: 1.65vmin;
      height: 1.75vmin;
      border-radius: 100%;
      border-left: 0.35vmin solid var(--bush);
      border-bottom: 0.35vmin solid #fff0;
      border-top: 0.15vmin solid #fff0;
      position: absolute;
      bottom: 0.15vmin;
      left: -1.25vmin;
      transform: rotate(-20deg);
    }

    i.cat + i.cat {
      transform: rotateY(180deg) scale(0.9);
      left: 4vmin;
    }

    i.cat + i.cat:after {
      transform: rotate(-27deg) rotateY(180deg);
      left: -2.6vmin;
      bottom: -0.2vmin;
    }

    /* 花朵 */
    i.flowers {
      background: var(--luz3);
      width: 70%;
      height: 1vmin;
      position: absolute;
      bottom: 1vmin;
      left: 15%;
    }

    i.flowers:before {
      content: "";
      position: absolute;
      background: var(--luz3);
      width: 0.75vmin;
      height: 2vmin;
      bottom: 0;
      left: 60%;
    }

    i.flowers:after {
      content: "";
      position: absolute;
      background: conic-gradient(from -22deg at 50% 100%, var(--luz3) 0 2%, #fff0 0 5%, var(--luz3) 0 7%, #fff0 0 10%, var(--luz3) 0 12%, #fff0 0 100%),
      radial-gradient(circle at 50% 0.25vmin, var(--luz3) 0 0.25vmin, #fff0 0 100%),
      radial-gradient(circle at 25% 0.45vmin, var(--luz3) 0 0.25vmin, #fff0 0 100%),
      radial-gradient(circle at 80% 0.4vmin, var(--luz3) 0 0.25vmin, #fff0 0 100%);
      width: 1.5vmin;
      height: 1.5vmin;
      bottom: 1.5vmin;
      left: 52%;
    }

    /* 仙人掌 */
    i.cactus {
      background: var(--bush);
      width: 0.85vmin;
      height: 2vmin;
      position: absolute;
      bottom: 3vmin;
      left: 3px;
      border-radius: 100% 100% 10% 45%;
      transform: rotate(-2deg);
    }

    i.cactus:before {
      content: "";
      position: absolute;
      background: var(--bush);
      width: 0.75vmin;
      height: 2vmin;
      bottom: 1.4vmin;
      left: -0.35vmin;
      border-radius: 100%;
    }

    i.cactus:after {
      content: "";
      position: absolute;
      background: var(--bush);
      width: 0.5vmin;
      height: 1.5vmin;
      bottom: 3vmin;
      left: 0.075vmin;
      border-radius: 100%;
      box-shadow: -0.6vmin 0.2vmin 0 -0.075vmin var(--bush), 0.4vmin 1.5vmin 0 -0.075vmin var(--bush);
    }

    .roof.six .cactus {
      left: 90%;
      transform: rotateY(60deg) rotate(-1deg);
      border-radius: 0% 100%;
      filter: drop-shadow(-2px 1px 0px #434770cc);
    }

    /* 仙人掌 2 */
    i.cactus2 {
      background: var(--luz3);
      width: 0.45vmin;
      height: 4vmin;
      position: absolute;
      bottom: 1vmin;
      left: 27vmin;
      border-radius: 100% 100% 0 0;
      transform: rotate(-7deg);
    }

    i.cactus2:before {
      content: "";
      position: absolute;
      background: #fff0;
      width: 0.75vmin;
      height: 1vmin;
      bottom: 1vmin;
      left: -0.5vmin;
      border-radius: 0 0 100% 100%;
      border: 0.5vmin solid var(--luz3);
      border-top-color: #fff0;
      border-left-width: 0.35vmin;
    }

    i.cactus2:after {
      content: "";
      position: absolute;
      background: var(--luz3);
      width: 0.4vmin;
      height: 0.75vmin;
      bottom: 3.2vmin;
      left: -0.05vmin;
      border-radius: 100%;
      box-shadow: -0.555vmin 0.75vmin 0 0 var(--luz3), 0.75vmin 0.65vmin 0 0 var(--luz3);
    }

    i.cactus2 + i.cactus2 {
      transform: scale(0.85) translate(-2.25vmin, -0.1vmin) rotate(-5deg) rotateY(180deg);
    }

    /*衬衫*/
    i.bush {
      background: var(--bush);
      width: 0.95vmin;
      height: 2vmin;
      position: absolute;
      bottom: 3vmin;
      left: 3px;
      border-radius: 100% 100% 10% 45%;
      transform: rotate(-2deg);
    }

    i.bush:before {
      content: "";
      position: absolute;
      background: var(--bush);
      width: 0.5vmin;
      height: 1.25vmin;
      bottom: 0.4vmin;
      left: -0.3vmin;
      border-radius: 100%;
      transform: rotate(-24deg);
    }

    i.bush:after {
      content: "";
      position: absolute;
      background: var(--bush);
      width: 0.5vmin;
      height: 1.5vmin;
      bottom: 1.7vmin;
      left: -0.075vmin;
      border-radius: 100%;
      box-shadow: -0.36vmin 0.5vmin 0 -0.075vmin var(--bush), 0.4vmin 0.75vmin 0 -0.025vmin var(--bush), 0.3vmin 0.25vmin 0 -0.025vmin var(--bush);
      transform: rotate(-16deg);
    }

    .roof.two .side:nth-child(1) i.bush {
      filter: drop-shadow(19px 6px 0px var(--luz2));
      transform: translateZ(-1vmin);
    }

    .roof.two .side:nth-child(3) i.bush {
      left: 91%;
      bottom: 2.95vmin;
      transform: rotateY(128deg);
      border-radius: 100% 100% 10% 40%;
      filter: drop-shadow(0.85vmin 11vmin 0px var(--bush)) drop-shadow(-2px -1px 0px #5a5d85);
    }

    .roof.four .side:nth-child(1) i.bush {
      transform: rotateY(180deg) scale(0.85) scaleX(0.65) rotate(92deg);
      border-radius: 100% 100% 10% 40%;
      bottom: 2.35vmin;
      left: 4px;
      filter: drop-shadow(45.55vmin -7px 0px var(--bush)) drop-shadow(-11.75vmin 2px 0px var(--bush));
    }

    .roof.six .side:nth-child(1) i.bush {
      transform: rotateY(180deg) scaleY(1.5) scaleX(0.65) rotate(92deg);
      border-radius: 100% 100% 10% 40%;
      bottom: 2.75vmin;
      left: 5px;
      filter: drop-shadow(40vmin 0 0px var(--bush)) drop-shadow(12.95vmin -1px 0px var(--bush));
    }

    /* 植物 */
    i.plant {
      position: absolute;
      background: linear-gradient(90deg, #fff0 38%, var(--luz2) 38% 61%, #fff0 61%), linear-gradient(180deg, #fff0 40%, var(--luz2) 45%);
      width: 1vmin;
      height: 3.5vmin;
      bottom: 0vmin;
      left: 5vmin;
      filter: drop-shadow(6vmin 0.5vmin 0px var(--luz3)) drop-shadow(8vmin 0.25vmin 0vmin var(--luz3)) drop-shadow(7vmin -0.25vmin 0vmin var(--luz3));
    }

    i.plant:before, i.plant:after {
      content: "";
      position: absolute;
      background: var(--luz2);
      width: 0.275vmin;
      height: 1vmin;
      transform: rotate(-45deg);
      border-radius: 100% 100% 0 0;
      box-shadow: 4px -4px 0 -0.05vmin var(--luz2);
      bottom: 2.25vmin;
    }

    i.plant:after {
      transform: rotateY(180deg) rotate(-45deg) translate(-0.65vmin, -0.35vmin);
    }

    .seven i.plant {
      left: 77%;
      --luz2: var(--luz3);
      filter: drop-shadow(-1.95vmin 0.5vmin 0px var(--luz3)) drop-shadow(-4vmin -0.75vmin 0vmin var(--luz3)) drop-shadow(-3vmin 0.25vmin 0vmin var(--luz3));
      transform: rotateY(180deg) scale(0.85);
    }

    .seven i.plant:after {
      --luz2: var(--luz3);
      box-shadow: 4px -4px 0 -0.05vmin var(--luz2), 8px -3px 0 -0.05vmin var(--luz2);
    }

    /* 灯 */
    .lights {
      position: absolute;
      width: 52vmin;
      height: 75vmin;
      --foco: radial-gradient(circle at 50% 50%, var(--luz1) 0 0.1vmin, #fff0 calc(0.1vmin + 1px) 100%);
      transform: rotateY(-8deg) rotateX(0deg) translateZ(22vmin) translateX(3vmin);
      background:
              var(--foco), var(--foco), var(--foco), var(--foco), var(--foco), var(--foco),
              var(--foco), var(--foco), var(--foco), var(--foco), var(--foco), var(--foco),
              var(--foco), var(--foco), var(--foco), var(--foco), var(--foco), var(--foco), var(--foco), var(--foco), var(--foco),
              var(--foco), var(--foco),
              var(--foco), var(--foco), var(--foco), var(--foco), var(--foco), var(--foco), var(--foco), var(--foco), var(--foco), var(--foco),
              var(--foco),
              var(--foco), var(--foco);
      background-position:
              6% 1%, 21% 1%, 11.5% 3.5%, 26% 3.5%, 90% 8%, 17% 6%,
              6% 15%, 11.5% 17%, 53.5% 15%, 58.5% 17%, 72.5% 17%, 67.5% 15%,
              6% 42%, 53.5% 42%, 67.5% 42%, 11.5% 44.25%, 26% 44%, 58.5% 44%, 72.5% 44%, 17% 46.5%, 63.5% 46.25%,
              67.6% 55%, 73% 57%,
              6% 68.5%, 21% 68.5%, 54% 68.5%, 68% 68.5%, 11.5% 71%, 27% 71%, 58.5% 71%, 73% 71%, 18% 73.5%, 64.5% 73.5%,
              16.5% 86%,
              6% 95.5%, 11.5% 98%;
      background-repeat: no-repeat;
      background-size: 1vmin 1vmin;
    }

    /* 按钮 */
    input { display: none; }

    /*按钮动画效果切换*/
    input#day-night:checked ~ .content .clouds {
      top: -10vh;
      transition: all 3s var(--cbz) 0s;
      opacity: 1;
      filter: drop-shadow(1vmin -1vmin 1vmin #fff) drop-shadow(-1vmin 1vmin 5vmin #fff) drop-shadow(20vmin 5vmin 5vmin #fff) drop-shadow(-10vmin -1vmin 3vmin #fff);
    }

    input#day-night:checked ~ .content {
      transition: --glass 3s;
      --glass: 200deg;
    }

    /*标签设置*/
    label {
      position: absolute;
      right: 3vmin;
      bottom: 3vmin;
      width: 13vmin;
      height: 5vmin;
      background: #0008;
      border-bottom: 1px solid #fff8;
      border-top: 1px solid #000;
      border-radius: 4vmin;
      cursor: pointer;
      z-index: 3;
    }
    /*标签伪元素before*/
    label:before {
      content: "";
      position: absolute;
      width: 12vmin;
      height: 4vmin;
      background: radial-gradient(circle at 50% 48%, #ffbf00 calc(2vmin - 1px), #fff0 2vmin), radial-gradient(circle at 90% 42%, #fff0 2.5vmin, #e6e6e6 calc(2.5vmin + 1px));
      border-radius: 2vmin;
      left: 0.6vmin;
      top: 0.325vmin;
      transition: all 0.4s ease 1s;
      background-repeat: no-repeat;
      background-size: 4.25vmin 4.25vmin, 4.15vmin 4.15vmin;
      background-position: 7.85vmin 0, 0vmin 0vmin;
    }

    /*标签伪元素after*/
    label:after {
      content: "";
      position: absolute;
      width: 6vmin;
      height: 6vmin;
      border-radius: 100%;
      left: -0.95vmin;
      top: -1.1vmin;
      transition: all 1s var(--cbz) 0s;
      border: 0.5vmin solid #fffc;
      box-shadow: 0 0 1vmin 0 #fffc, 0 0 1vmin 0 #fffc inset;
    }

    /*选择器，用来设定点击后的样式改变*/
    input#day-night:checked + label:after {
      border-color: #ffc71e;
      box-shadow: 0 0 1vmin 0.25vmin #ffc71e, 0 0 1vmin 0.25vmin #ffc71e inset;
    }

    input#day-night:checked + label:after {
      left: 6.95vmin;
      transition: all 1s var(--cbz) 0s;
    }

    /*云*/
    .clouds {
      position: absolute;
      top: 75vh;
      width: 100vw;
      height: 100%;
      background: radial-gradient(ellipse at 10% 23%, #fff1 4vmin, #fff0 15vmin),radial-gradient(ellipse at 0% 15%, #fff1 4vmin, #fff0 8vmin), radial-gradient(circle at 6% 17%, #fff1 4vmin, #fff0 8vmin), radial-gradient(ellipse at 4% 16%, #fff1 1vmin, #fff0 5vmin), radial-gradient(circle at 9% 16%, #fff1 1vmin, #fff0 5vmin), radial-gradient(ellipse at 12% 18%, #fff1 1vmin, #fff0 5vmin), radial-gradient(circle at 17% 19%, #fff1 2vmin, #fff0 6vmin), radial-gradient(ellipse at 13% 13%, #fff1 1vmin, #fff0 6vmin), radial-gradient(ellipse at 22% 20%, #fff1 2vmin, #fff0 8vmin), radial-gradient(circle at 4% 22%, #fff1 0vmin, #fff0 4vmin), radial-gradient(circle at 7% 24%, #fff1 0vmin, #fff0 4vmin), radial-gradient(ellipse at 10% 22%, #fff1 0vmin, #fff0 4vmin), radial-gradient(circle at 30% 19%, #fff2 0vmin, #fff0 13vmin), radial-gradient(circle at 26% 13%, #fff1 0vmin, #fff0 4vmin), radial-gradient(circle at 33% 15%, #fff1 -3vmin, #fff0 7vmin), radial-gradient(circle at 45% 19%, #fff1 4vmin, #fff0 14vmin), radial-gradient(circle at 38% 20%, #fff1 -3vmin, #fff0 7vmin), radial-gradient(circle at 52% 20%, #fff1 0vmin, #fff0 6vmin), radial-gradient(circle at 56% 15%, #fff1 0vmin, #fff0 7vmin), radial-gradient(circle at 58% 18%, #fff1 0vmin, #fff0 7vmin), radial-gradient(circle at 41% 26%, #fff1 2vmin, #fff0 8vmin), radial-gradient(circle at 60% 15%, #fff1 0vmin, #fff0 7vmin), radial-gradient(circle at 63% 12%, #fff1 0vmin, #fff0 7vmin), radial-gradient(circle at 63% 21%, #fff1 4vmin, #fff0 15vmin), radial-gradient(circle at 60% 25%, #fff1 2vmin, #fff0 7vmin), radial-gradient(ellipse at 63% 20%, #fff1 0vmin, #fff0 7vmin), radial-gradient(circle at 71% 25%, #fff1 2vmin, #fff0 9vmin), radial-gradient(ellipse at 84% 22%, #fff1 -1vmin, #fff0 8vmin), radial-gradient(ellipse at 78% 25%, #fff1 -1vmin, #fff0 10vmin), radial-gradient(ellipse at 90% 18%, #fff1 -1vmin, #fff0 10vmin), radial-gradient(ellipse at 93% 17%, #fff1 2vmin, #fff0 11vmin), radial-gradient(circle at 79% 17%, #fff1 -3vmin, #fff0 7vmin), radial-gradient(ellipse at 73% 12%, #fff1 -3vmin, #fff0 6vmin), radial-gradient(ellipse at 68% 15%, #fff1 -2vmin, #fff0 9vmin), radial-gradient(ellipse at 95% 25%, #fff1 -2vmin, #fff0 9vmin), radial-gradient(ellipse at 98% 26%, #fff1 -2vmin, #fff0 9vmin), radial-gradient(ellipse at 90% 23%, #fff1 -2vmin, #fff0 9vmin);
      transform: translateZ(-100vmin);
      transition: all 3s var(--cbz) 0s;
      opacity: 0.6;
    }

    .clouds span {
      opacity: 0;
    }

  </style>
</head>
<body>
<!--右下角的按钮-->
<input type="checkbox" id="day-night"><label for="day-night"></label>
<!--主体动画-->
<div class="content">
<!--  太阳和月亮-->
  <div class="moon-sun"></div>
<!--  第一层楼-->
  <div class="cuboid floor one">
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
  </div>
<!--  屋顶-->
  <div class="cuboid roof one">
    <div class="side"><i class="cactus"></i></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
  </div>
  <!--  第二层楼-->
  <div class="cuboid floor two">
    <div class="side"><span><i class="flowers"></i></span></div>
    <div class="side"></div>
    <div class="side"><span></span></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
  </div>
  <!--  屋顶-->
  <div class="cuboid roof two">
    <div class="side"><i class="bush"></i></div>
    <div class="side"></div>
    <div class="side"><i class="bush"></i></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
  </div>
  <!--  第三层楼-->
  <div class="cuboid floor three">
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"><span></span></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
  </div>
  <!--  屋顶-->
  <div class="cuboid roof three">
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
  </div>
  <!--  第四层楼-->
  <div class="cuboid floor four">
    <div class="side"><i class="man"></i></div>
    <div class="side"></div>
    <div class="side"><span></span></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
  </div>
  <!--  屋顶-->
  <div class="cuboid roof four">
    <div class="side"><i class="bush"></i></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
  </div>
  <!--  第五层楼-->
  <div class="cuboid floor five">
    <div class="side"><i class="cactus2"></i><i class="cactus2"></i><span></span></div>
    <div class="side"></div>
    <div class="side"><span></span></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
  </div>
  <!--  屋顶-->
  <div class="cuboid roof five">
    <div class="side"><i class="cactus"></i></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
  </div>
  <!--  第六层楼-->
  <div class="cuboid floor six">
    <div class="side"><span><i class="cat"></i><i class="cat"></i></span></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
  </div>
  <!--  屋顶-->
  <div class="cuboid roof six">
    <div class="side"><i class="bush"></i></div>
    <div class="side"></div>
    <div class="side"><i class="cactus"></i></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
  </div>
  <!--  第七层楼-->
  <div class="cuboid floor seven">
    <div class="side"><i class="plant"></i></div>
    <div class="side"></div>
    <div class="side"><span></span></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
  </div>
  <!--  屋顶-->
  <div class="cuboid roof seven">
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
  </div>
  <!--  第八层楼-->
  <div class="cuboid floor eight">
    <div class="side"><i class="plant"></i><i class="man"></i></div>
    <div class="side"></div>
    <div class="side"><span></span></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
  </div>
  <!--  屋顶-->
  <div class="cuboid roof eight">
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
  </div>
   <!--楼顶小空调-->
  <div class="cuboid air-cooler">
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
  </div>
  <!--楼顶大空调-->
  <div class="cuboid air-cooler">
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
  </div>
    <!--房间里的灯-->
  <div class="lights"></div>
   <!--天上的云-->
  <div class="clouds"></div>

</div>
</body>
</html>

timi先生

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
太阳升起和落下(长文警告)

今天分享一个太阳升起落下的动画场景。有朋友问我为什么只发代码不做说明，今天我们尝试下对代码进行注解说明一下。首先这个场景大致的可拆分为4个部分：太阳/月亮，右下角的按钮，天上的云和最显眼的建筑。我们先做一个按钮，它可以控制整个场景的切换，像下面这样我们定义一个按钮和一个标签，：<input type="checkbox" id="day-night"><label for="day-night"></label>写了这个按钮就会出现么，答案是：NO。我们
复制链接

扫一扫