今天分享一个太阳升起落下的动画场景。

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

首先这个场景大致的可拆分为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>