css怎么实现雪人

冬天来了，怎么能少的了雪人呢，不管是现实中还是程序员的代码中统统都的安排上，那就一次安排几个雪人兄弟，咱们先看效果图：

有喜欢的就赶紧cv拿走吧！！！
其详细代码如下：
图1
html部分：

		<div class="snowman">
		  <div class="snowman-face"></div>
		  <div class="snowman-nose"></div>
		  <div class="mouth"></div>
		  <div class="buttons"></div>
		  <div class="arm right"></div>
		  <div class="arm left"></div>
		</div>
		<div class="shadow"></div>

css部分：

			* {
			  margin: 0;
			  padding: 0;
			}
			
			body {
			  height: 100vh;
			  width: 100vw;
			  background: #b3d3c3;
			  display: flex;
			  flex-direction: column;
			  justify-content: center;
			  align-items: center;
			}
			
			.snowman {
			  position: relative;
			  background: linear-gradient(
			    166deg,
			    rgba(255, 255, 255, 1) 78%,
			    rgba(248, 244, 238, 1) 88%
			  );
			  height: 23vmin;
			  width: 25vmin;
			  border-radius: 48% 52% 51% 49% / 53% 53% 47% 47%;
			  top: 9vmin;
			}
			
			.snowman::after {
			  position: absolute;
			  content: "";
			  background: linear-gradient(
			    166deg,
			    rgba(255, 255, 255, 1) 78%,
			    rgba(248, 244, 238, 1) 88%
			  );
			  height: 20vmin;
			  width: 25vmin;
			  border-radius: 48% 52% 51% 49% / 58% 59% 41% 42%;
			  top: -13vmin;
			}
			
			.snowman::before {
			  position: absolute;
			  content: "";
			  background: #f4e8e1;
			  height: 10vmin;
			  width: 16vmin;
			  border-radius: 48% 52% 51% 49% / 58% 59% 41% 42%;
			  left: 4.5vmin;
			  top: -2vmin;
			}
			
			.snowman-face {
			  position: relative;
			  background: #20313d;
			  height: 2vmin;
			  width: 2vmin;
			  border-radius: 50%;
			  top: -2vmin;
			  left: 7vmin;
			
			  box-shadow: 9vmin 0 #20313d;
			  z-index: 1;
			
			  animation: blink 6s infinite;
			}
			
			.snowman-face::after {
			  position: absolute;
			  content: "";
			  background: white;
			  height: 0.4vmin;
			  width: 0.4vmin;
			  border-radius: 50%;
			  left: 1.1vmin;
			  top: 0.4vmin;
			
			  box-shadow: 9vmin 0 white;
			}
			
			.snowman-nose {
			  position: relative;
			  background: #fa9b7d;
			  height: 2.5vmin;
			  width: 1.5vmin;
			  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
			  left: 12.5vmin;
			  top: -3vmin;
			  transform: rotate(90deg);
			  z-index: 1;
			}
			
			.snowman-nose::after {
			  position: absolute;
			  content: "";
			  border-top: 0.7vmin solid transparent;
			  border-left: 2vmin solid #fa9b7d;
			  border-bottom: 0.7vmin solid transparent;
			  left: -0.25vmin;
			  top: -0.9vmin;
			  transform: rotate(-90deg);
			}
			
			.snowman-nose::before {
			  position: absolute;
			  content: "";
			  background: transparent;
			  height: 1.5vmin;
			  width: 1vmin;
			  border-radius: 50% 60% 70% 40% / 50% 50% 60% 20%;
			  border-right: 0.3vmin solid #d1b4ae;
			  border-bottom: 0.3vmin solid #d1b4ae;
			
			  top: 2.8vmin;
			  left: 2vmin;
			
			  transform: rotate(-10deg);
			}
			
			.buttons {
			  position: relative;
			  background: #ec7671;
			  height: 2vmin;
			  width: 2vmin;
			  border-radius: 50%;
			  top: 6vmin;
			  left: 11.7vmin;
			  box-shadow: 0 3vmin #ec7671;
			}
			
			.buttons::after {
			  position: absolute;
			  content: "";
			  background: white;
			  color: white;
			  height: 0.3vmin;
			  width: 0.3vmin;
			  border-radius: 50%;
			  left: 0.9vmin;
			  top: 0.3vmin;
			  box-shadow: -0.5vmin 0.5vmin, 0.5vmin 0.5vmin, 0 1vmin, 0 3vmin,
			    -0.5vmin 3.5vmin, 0.5vmin 3.5vmin, 0 4vmin;
			}
			
			.buttons::before {
			  position: absolute;
			  content: "";
			  background: #f7d6d8;
			  height: 2vmin;
			  width: 3vmin;
			  border-radius: 50%;
			
			  left: -7vmin;
			  top: -11.1vmin;
			
			  box-shadow: 12.5vmin 0 #f7d6d8;
			  animation: fix 6s infinite;
			  z-index: 1;
			}
			
			.arm {
			  position: relative;
			  background: #f09f7f;
			  height: 9vmin;
			  width: 0.4vmin;
			  top: -5vmin;
			  left: 26.5vmin;
			  transform: rotate(50deg);
			}
			
			.arm::after {
			  position: absolute;
			  content: "";
			  background: #f09f7f;
			  height: 2.5vmin;
			  width: 0.4vmin;
			  left: 0.7vmin;
			  top: 0vmin;
			  transform: rotate(35deg);
			}
			
			.arm::before {
			  position: absolute;
			  content: "";
			  background: #f09f7f;
			  height: 2.5vmin;
			  width: 0.4vmin;
			  left: -0.8vmin;
			  top: 0.2vmin;
			  transform: rotate(-45deg);
			}
			
			.left {
			  transform: scaleX(-1) rotate(50deg);
			  left: -2vmin;
			  top: -13vmin;
			}
			
			.right {
			  animation: wave 2s infinite;
			}
			
			.shadow {
			  position: relative;
			  background: #91beaf;
			  height: 3vmin;
			  width: 22vmin;
			  border-radius: 50%;
			  top: 7.5vmin;
			  z-index: -1;
			}
			
			@keyframes blink {
			  0%,
			  9%,
			  11%,
			  19%,
			  21%,
			  69%,
			  71%,
			  100% {
			    transform: scaleY(1);
			  }
			  10%,
			  20%,
			  70% {
			    transform: scaleY(0);
			  }
			}
			
			@keyframes wave {
			  50% {
			    transform-origin: 10%;
			    transform: rotate(75deg) translate(2vmin, -1vmin);
			  }
			}

图2
html部分：

		<div class="canvas">
		  <div class="hill"></div>
		  <div class="shadow"></div>
		  <div class="body">
		    <div class="button"></div>
		    <div class="button"></div>
		    <div class="arm"></div>
		    <div class="arm"></div>
		  </div>
		  <div class="thread"></div>
		  <div class="scarf-hanging"></div>
		  <div class="scarf"></div>
		  <div class="head">
		    <div class="cheek"></div>
		    <div class="cheek"></div>
		    <div class="eye"></div>
		    <div class="eye"></div>
		    <div class="mouth"></div>
		    <div class="nose"></div>
		  </div>
		  <div class="hat-base"></div>
		  <div class="hat-top"></div>
		</div>

css部分：

			body {
			  margin: 0;
			  height: 100vh;
			  overflow: hidden;
			  background: linear-gradient(#adf, #ddd);
			}
			
			
			.canvas {
			  width: 80vmin;
			  height: 80vmin;
			  position: absolute;
			  top: 50%;
			  left: 50%;
			  transform: translate(-50%, -50%);
			}
			
			.canvas *,
			.canvas *::before,
			.canvas *::after {
			  position: absolute;
			  box-sizing: border-box;
			  display: block;
			} 
			
			.head {
			  width: 43%;
			  height: 33%;
			  background:radial-gradient(170% 100% at 50% 0%, #0005, #0001 37%, #0000 0);
			  background-color: #fff;
			  border-radius: 100% / 90% 90% 110% 110%;
			  top: 24%;
			  left: 50%;
			  transform: translateX(-50%);
			  box-shadow:
			    inset 2vmin 0 6vmin 1vmin #fffa,
			    inset -2vmin 0 6vmin 1vmin #fffa,
			    inset 0 0 4vmin 1vmin #0004,
			    0 0.25vmin 0 1vmin;
			}
			
			.body {
			  width: 59%;
			  height: 50%;
			  background:
			    linear-gradient(45deg, #0000 45%, #0002 0 55%, #0000 0) no-repeat 118% 47% / 20% 20%,
			    linear-gradient(-45deg, #0000 45%, #0002 0 55%, #0000 0) no-repeat -15% 45% / 20% 20%,
			    radial-gradient(100% 100% at 50% 0%, #0001 34%, #0000 0);
			  background-color: #fff;
			  border-radius: 100% / 110% 110% 90% 90%;
			  bottom: 0%;
			  left: 50%;
			  transform: translateX(-50%);
			  box-shadow:
			     inset 3vmin 0 5vmin #fffa,
			    inset -3vmin 0 5vmin #fffa,
			    inset 0 0 6vmin #0004,
			    0 0.25vmin 0 1vmin;
			}
			
			.scarf {
			  width: 37%;
			  height: 25%;
			  border-radius: 50%;
			  background: #d00;
			  box-shadow:
			    inset 3vmin 1vmin 3vmin -2vmin #fffa,
			    inset -3vmin 2vmin 3vmin -2vmin #fffa,
			    inset 0 -1vmin 2vmin #8008,
			    0 0.25vmin 0 1vmin;
			  top: 38%;
			  left: 50%;
			  transform: translate(-50%);
			}
			
			.scarf-hanging {
			  width: 10%;
			  height: 20%;
			  background: #d00;
			  top: 50%;
			  left: 58%;
			  border-radius: 100% 100% 100% 100% / 20% 140% 30% 10%;
			  transform: rotate(-3deg);
			  box-shadow: 
			    inset 3vmin 1vmin 3vmin -2vmin #fff7,
			    inset -3vmin 2vmin 3vmin -2vmin #fff7,
			    inset 0 -1vmin 2vmin #8008,
			    0 0.25vmin 0 1vmin;
			}
			
			.thread {
			  top: 67%;
			  left: 56.5%;
			  width: 13.33%;
			  height: 7%;
			  border-radius: 100% / 50%;
			  transform: rotate(-4deg);
			  background:
			    repeating-linear-gradient(to right, #0000 0 7%, #000 7.5% 14%, #0000 0 14.5%)
			}
			
			.button {
			  box-shadow: 0 0.25vmin 0 0.8vmin;
			  background:
			    radial-gradient(circle at 35% 35%, #fff3 20%, #0000 )
			    ;
			  background-color: black;
			  width: 7%;
			  height: 9%;
			  border-radius: 100% 90% 110% 100%;
			  top: 40%;
			  left: 50%;
			  transform: translateX(-50%);
			}
			
			.button + .button {
			  top: 60%;
			  transform: translateX(-50%) rotate(20deg);
			}
			
			.eye {
			  --pos: 20%;
			  box-shadow: 
			    inset 0 0 1vmin 0.125vmin #000,
			    inset -0.5vmin -0.5vmin 1vmin #000,
			    inset -1.5vmin -1vmin 2vmin #fffb,
			    0.25vmin 1.25vmin 0 0.8vmin #0002,
			    0 0.25vmin 0 0.8vmin;
			  background-color: #222;
			  width: 13%;
			  height: 22%;
			  border-radius: 100% 90% 110% 100%;
			  top: 38%;
			  left: var(--pos);
			  transform: rotate(10deg);
			  overflow: hidden;
			}
			
			.eye + .eye {
			  left: auto;
			  right: var(--pos);
			}
			
			.eye::before {
			  content: "";
			  width: 45%;
			  height: 50%;
			  background: #fff;
			  border-radius: 100%;
			  top: 15%;
			  left: 10%;
			  transform: rotate(15deg);
			  box-shadow: 0 0 3vmin 1.5vmin #000;
			}
			
			.mouth {
			  width: 12%;
			  height: 16%;
			  border-radius: 100% 90% 110% 100%;
			  top: 70%;
			  left: 50%;
			  transform: translate(-50%) rotate(3deg);
			  border:0.6vmin solid;
			  border-bottom-width: 0.9vmin;
			  clip-path: polygon(-20% 40%, 120% 30%, 120% 120%, -20% 120%)
			}
			
			.nose {
			  width: 15%;
			  height: 11%;
			  background:linear-gradient(#ff05, #0000, #d805);
			  background-color: #fa0;
			  border-radius: 150% 60% 60% 150% / 100%;
			  left: 45%;
			  top: 55%;
			  transform: translate(-50%, 0);
			  box-shadow: -0.0625vmin 0 0 0.7vmin
			}
			
			.nose::before,
			.nose::after {
			  content: "";
			  width: 40%;
			  height: 80%;
			  border-radius: 100%;
			  border-right: 0.5vmin solid darkorange;
			  top: 50%;
			  left: 45%;
			  transform: translate(-50%, -50%);
			}
			
			.nose::after {
			  width: 25%;
			  height: 60%;
			  left: 25%;
			}
			
			.cheek {
			  width: 25%;
			  height: 18%;
			  background: red;
			  border-radius: 50%;
			  background: radial-gradient(farthest-side, #f003, #0000);
			  top: 65%;
			  left: 12%;
			}
			
			.cheek + .cheek {
			  left: auto;
			  right: 12%;
			}
			
			.cheek::before,
			.cheek::after {
			  content: "";
			  width: 30%;
			  height: 35%;
			  border-radius: 100%;
			  border-top: 0.5vmin solid #f004;
			  top: 50%;
			  left: 40%;
			  transform: translate(-50%, -50%) rotate(-40deg);
			}
			
			.cheek::after {
			  transform: translate(-10%, -35%) rotate(-20deg);
			}
			
			.arm {
			  width: 40%;
			  height: 20%;
			  border-radius: 0% 50% 50% 50%;
			  top: 30%;
			  right: 5%;
			  transform: translateX(100%) rotate(-25deg);
			  box-shadow: 0 -2.5vmin 0 -1vmin
			}
			
			.arm::before,
			.arm::after {
			  content: "";
			  width: 30%;
			  height: 1.5vmin;
			  background: black;
			  border-radius: 0 100% 100% 0;
			  right: -5%;
			  top: -1.25vmin
			}
			
			.arm::after {
			  transform-origin: left center;
			  transform: rotate(-30deg);
			  width: 25%;
			  right: 5%;
			}
			
			.arm + .arm {
			  left: 12%;
			  top: 10%;
			  border-radius: 15% 50% 50% 50%;
			  transform: scaleX(-1) translateX(100%) rotate(-10deg) scaleY(-1);
			}
			
			.hat-base {
			  width: 55%;
			  height: 14%;
			  background: #333;
			  border-radius: 100% / 120% 120% 90% 90%;
			  box-shadow:
			    inset 2vmin -1.5vmin 4vmin 0.5vmin #fff5,
			    inset -2vmin -1.5vmin 4vmin 0.5vmin #fff5,
			    inset 0 0 5vmin 2vmin #000,
			    inset 0 -2vmin 4vmin 1vmin #000,
			    
			    0 0.25vmin 0 1vmin
			    ;
			  left: 50%;
			  transform: translateX(-50%);
			  top: 18%;
			}
			
			.hat-top {
			  width: 29%;
			  height: 25%;
			  background:
			    radial-gradient(300% 50% at 50% 0, #000 18%, #0000 0),
			    radial-gradient(200% 100% at 50% 0, #0000 0 80%, #000 0 82%, purple 0)
			    ;
			  background-color: #333;
			  box-shadow:
			    inset 0 1vmin 1vmin -1vmin #fff8,
			    inset 1.5vmin 1.5vmin 3vmin 0.25vmin #fff5,
			    inset -2vmin 1.5vmin 3vmin 0.25vmin #fff3,
			    inset 0 0 5vmin 1vmin #0007,
			    inset 0 -2vmin 4vmin 1vmin #0007,
			    0 0.1vmin 0 1vmin
			    ;
			  border-radius: 100% / 10% 10% 10% 5%;
			  left: 50%;
			  top: 1%;
			  transform: translate(-50%, 0);
			  overflow: hidden;
			}
			
			.hat-top::before {
			  content: "";
			  width: 100%;
			  height: 100%;
			  background:
			    radial-gradient(300% 50% at 50% 0, #0000 18%, #000 18.5% 24%, #0000 24.5%)
			}
			
			.shadow {
			  width: 100%;
			  height: 15%;
			  background: #0001;
			  border-radius: 50%;
			  bottom: -6%;
			  filter: blur(0.5vmin)
			}
			
			.hill {
			  width: 200vmax;
			  height: 100vmax;
			  background: linear-gradient(aliceblue, #fff 25%);
			  top: 75%;
			  left: 50%;
			  transform: translate(-50%, 0);
			  border-radius: 100% / 20%;
			  border: 1.25vmin solid;
			}

图3
html部分：

		<div class="canvas">
		  <div class="shadow"></div>
		  <div class="base"></div>
		  <div class="bowl">
		    
		    <div class="snowflake"></div>
		    <div class="snowflake"></div>
		    <div class="snowflake"></div>
		    <div class="snowflake"></div>
		    <div class="snowflake"></div>
		    <div class="snowflake"></div>
		    <div class="snowflake"></div>
		    <div class="snowflake"></div>
		    <div class="snowflake"></div>
		    <div class="snowflake"></div>
		    <div class="snowflake"></div>
		    <div class="snowflake"></div>
		    <div class="snowflake"></div>
		    <div class="snowflake"></div>
		    <div class="snowflake"></div>
		    <div class="snowflake"></div>
		    <div class="snowflake"></div>
		    <div class="snowflake"></div>
		    <div class="snowflake"></div>
		    <div class="snowflake"></div>
		    <div class="snowflake"></div>
		    <div class="snowflake"></div>
		    <div class="snowflake"></div>
		    <div class="snowflake"></div>
		    <div class="snowflake"></div>
		    <div class="snowflake"></div>
		    <div class="snowflake"></div>
		    <div class="snowflake"></div>
		    <div class="snowflake"></div>
		    <div class="snowflake"></div>
		    
		    <div class="snow"></div>
		    <div class="ground"></div>
		    <!-- Something here :) -->
		    <div class="something">
		    </div>
		    <!-- end of something -->
		  </div>
		  <div class="bowl">
		    <div class="reflection"></div>
		  </div>
		  <div class="base"></div>
		</div>

css部分：

			html {
			  background: #cde;
			}
			
			.canvas {
			  --size: 80vmin;
			  width: var(--size);
			  aspect-ratio: 1;
			  position: absolute;
			  top: 50%;
			  left: 50%;
			  transform: translate(-50%, -50%);
			}
			
			@keyframes shake {
			  0%, 50%, 100% {
			    transform: translate(-50%, -50%) rotate(0deg) translate(0, 0);
			  }
			  25% {
			    transform: translate(-50%, -50%) rotate(4deg) translate(0, -10%);
			  }
			  75% {
			    transform: translate(-50%, -50%) rotate(-6deg) translate(0, -12%);
			  }
			}
			
			.canvas:active {
			  animation: shake 1s infinite;
			}
			
			.canvas div,
			.canvas div::before,
			.canvas div::after {
			  position: absolute;
			  box-sizing: border-box;
			  display: block;
			}
			
			.base {
			  width: 60%;
			  height: 26%;
			  bottom: 0;
			  left: 20%;
			  border-radius: 100% / 40%;
			  background:
			    radial-gradient(100% 50% at 50% 14%, #000, #0000 80%),
			    linear-gradient(to right, #0004, #0000, #0004);
			  background-color: #222;
			}
			
			.base ~ .base {
			  -webkit-mask: radial-gradient(100% 50% at 50% 14%, #0000 50%, #000 51%);
			  mask: radial-gradient(100% 50% at 50% 14%, #0000 50%, #000 51%);
			  background:
			    radial-gradient(150% 112% at 50% 0%, #000 38%, #0000 0),
			    radial-gradient(100% 50% at 50% 14%, #000, #0000 80%),
			    linear-gradient(to right, #0004, #0000, #0004),
			    repeating-linear-gradient(to right, #444 0 1.2%, #666 1.4%, #333 0 2.4%);
			  z-index: 3;
			}
			
			.bowl {
			  top: 0;
			  left: 5%;
			  width: 90%;
			  height: 90%;
			  background-color: #beeeef33;
			  border-radius: 50%;
			  overflow: hidden;
			}
			
			.bowl + .bowl {
			  z-index: 2;
			  background: #beeeef33;
			  box-shadow: 
			    inset 0 0 2vmin #fff8,
			    inset 3vmin 0 5vmin #0003,
			    inset -3vmin 0 5vmin #0003,
			    inset 0 -20vmin 3vmin -14vmin #0007
			    ;
			}
			
			.ground {
			  width: 80%;
			  height: 15%;
			  border-radius: 50%;
			  background: white;
			  top: 69%;
			  left: 50%;
			  transform: translateX(-50%);  
			}
			
			.snow {
			  width: 97.5%;
			  height: 95%;
			  border-radius: 50%;
			  background: linear-gradient(#0000 79%, #eee 0);
			  top: 50%;
			  left: 50%;
			  transform: translate(-50%, -50%);
			  box-shadow: 
			    inset -2vmin 2vmin 4vmin -2vmin #fffa,
			    inset 2vmin 0 4vmin -2vmin #0001;
			}
			
			.reflection {
			  width: 45%;
			  height: 18%;
			  background: #f003;
			  background: linear-gradient(#fff4, #fff0);
			  border-radius: 50%;
			  top: 13%;
			  left: 60%;
			  transform: rotate(17deg) translateX(-50%);
			}
			
			.canvas:active .shadow {
			  opacity: 0;
			}
			
			.shadow {
			  width: 100%;
			  height: 15%;
			  background: radial-gradient(farthest-side, #0008, #0000);
			  border-radius: 50%;
			  bottom: -4%;
			  left: -5%;
			  filter: blur(1vmin);
			}
			
			@keyframes snowfall {
			  to {
			    transform: translate(0, calc(var(--size) * 0.77));
			  }
			}
			
			.snowflake {
			  left: 50%;
			  top: -5%;
			  width: 2%;
			  height: 2%;
			  background: white;
			  border-radius: 50%;
			  abox-shadow: inset 0.25vmin -0.25vmin 0.25vmin #0002;
			  animation: snowfall 4s 1 forwards;
			}
			
			.snowflake:nth-child(3n) {
			  z-index: 1; 
			}
			.snowflake:nth-child(1)  { left: 25%; animation-delay: 1s; }
			.snowflake:nth-child(2)  { left: 20%; animation-delay: 2s; }
			.snowflake:nth-child(3)  { left: 30%; animation-delay: 3s; }
			.snowflake:nth-child(4)  { left: 40%; animation-delay: 4s; }
			.snowflake:nth-child(5)  { left: 50%; animation-delay: 5s; }
			.snowflake:nth-child(6)  { left: 60%; animation-delay: 1.5s; }
			.snowflake:nth-child(7)  { left: 70%; animation-delay: 2.5s; }
			.snowflake:nth-child(8)  { left: 80%; animation-delay: 3.5s; }
			.snowflake:nth-child(9)  { left: 75%; animation-delay: 4.5s; }
			.snowflake:nth-child(11) { left: 28%; animation-delay: 5.5s; }
			.snowflake:nth-child(12) { left: 19%; animation-delay: 0.5s; }
			.snowflake:nth-child(13) { left: 38%; animation-delay: 1.2s; }
			.snowflake:nth-child(14) { left: 48%; animation-delay: 2.2s; }
			.snowflake:nth-child(15) { left: 58%; animation-delay: 3.2s; }
			.snowflake:nth-child(16) { left: 68%; animation-delay: 4.2s; }
			.snowflake:nth-child(17) { left: 78%; animation-delay: 1.7s; }
			.snowflake:nth-child(18) { left: 82%; animation-delay: 2.7s; }
			.snowflake:nth-child(19) { left: 65%; animation-delay: 3.7s; }
			.snowflake:nth-child(20) { left: 54%; animation-delay: 4.7s; }
			.snowflake:nth-child(21) { left: 24%; animation-delay: 0.25s; }
			.snowflake:nth-child(22) { left: 24%; animation-delay: 0.5s; }
			.snowflake:nth-child(23) { left: 34%; animation-delay: 0.75s; }
			.snowflake:nth-child(24) { left: 44%; animation-delay: 0.6s; }
			.snowflake:nth-child(25) { left: 54%; animation-delay: 2.75s; }
			.snowflake:nth-child(26) { left: 64%; animation-delay: 1.75s; }
			.snowflake:nth-child(27) { left: 74%; animation-delay: 3.75s; }
			.snowflake:nth-child(28) { left: 84%; animation-delay: 1.4s; }
			.snowflake:nth-child(29) { left: 74%; animation-delay: 2.4s; }
			.snowflake:nth-child(30) { left: 17%; animation-delay: 3.4s; }
			
			.canvas:active .snowflake {
			  animation: none;
			}
			
			.something {
			  width: 50%;
			  height: 50%;
			  left: 50%;
			  bottom: 23%;
			  transform: translate(-50%, 0);
			  background:
			    radial-gradient(circle at 45% 22%, #222 3%, #0000 0),
			    radial-gradient(circle at 58% 22%, #222 3%, #0000 0),
			    radial-gradient(circle at 58% 60%, #222 3%, #0000 0),
			    radial-gradient(circle at 60% 70%, #222 2.75%, #0000 0),
			    radial-gradient(circle at 58% 80%, #222 2.5%, #0000 0),
			    conic-gradient(at 100% 50%, #0000 260deg, orange 0 280deg, #0000 0) 60% 25% / 15% 15%,
			    linear-gradient(30deg, #0000 40%, brown 0 50%, #0000 0) 100% 70% / 20% 20%,
			    linear-gradient(0deg, #0000 40%, brown 0 60%, #0000 0) 100% 70% / 10% 10%,
			    linear-gradient(60deg, #0000 40%, brown 0 55%, #0000 0) 100% 74% / 10% 10%,
			    linear-gradient(-30deg, #0000 40%, brown 0 50%, #0000 0) 5% 67% / 20% 20%,
			    linear-gradient(20deg, #0000 40%, brown 0 60%, #0000 0) 5% 65% / 10% 10%,
			    linear-gradient(130deg, #0000 40%, brown 0 60%, #0000 0) 6% 72% / 10% 10%,
			    radial-gradient(circle at 50% 25%, #fff, #eee 22%, #0000 0),
			    radial-gradient(circle at 50% 30%, #000, #0000 20%),
			    radial-gradient(circle at 50% 70%, #fff, #eee 40%, #0000 0)
			    ;
			  background-repeat: no-repeat;
			}

图4
html部分：

		<a class="snow">
		  <a class="flake"> . </a>
		  <a class="flake"> . </a>
		  <a class="flake"> . </a>
		  <a class="flake"> . </a>
		  <a class="flake"> . </a>
		  <a class="flake"> . </a>
		  <a class="flake"> . </a>
		  <a class="flake"> . </a>
		  <a class="flake"> . </a>
		  <a class="flake"> . </a>
		</a>
		<div class="face">
		  <div class="nose"></div>
		  <div class="eye1"></div>
		  <div class="eye2"></div>
		  <div class="body"></div>
		  <div class="blush1"></div>
		  <div class="blush2"></div>
		  <div class="hat"></div>
		  <div class="hat2"></div>
		  <div class="hat3"></div>
		  <div class="mouth"></div>
		  <div class="mouth_small"></div>
		  <div class="hand1"></div>
		  <div class="hand2"></div>
		  <div class="feet1"></div>
		  <div class="feet2"></div>
		  <div class="mustache"></div>
		  <div class="mustache"></div>
		  <div class="button1"></div>
		  <div class="button2"></div>
		  <div class="button3"></div>
		  <div class="scarf1"></div>
		  <div class="scarf2"></div>
		  <div class="scarf3"></div>
		  <div class="scarf4"></div>
		  <div class="scarf5"></div>
		  <div class="dot1"></div>
		  <div class="dot2"></div>
		  <div class="dot3"></div>
		  <div class="dot4"></div>
		  <div class="dot5"></div>
		  <div class="dot6"></div>
		  <div class="dot7"></div>
		  <div class="dot8"></div>
		  <div class="tree1"></div>
		  <div class="tree2"></div>
		  <div class="tree3"></div>
		  <div class="tree4"></div>
		  <div class="bird1"></div>
		  <div class="bird2"></div>
		  <div class="bird3"></div>
		  <div class="bird4"></div>
		  <div class="bird5"></div>
		  <div class="bird6"></div>
		  <div class="bird7"></div>
		  <div class="bird8"></div>
		  <div class="bird9"></div>
		  <div class="bird10"></div>
		  <div class="bird11"></div>
		  <div class="bird12"></div>
		  <div class="bird13"></div>
		</div>

css部分：

			body {
			  height: 100vh;
			  overflow: hidden;
			  position: relative;
			  background-color: lightskyblue;
			  text-align: center;
			}
			
			p{
			  color: #fff;
			  font-size: 34px;
			  position: absolute;
			  top: 8%;
			  left: 50%;
			  transform: translateX(-50%);
			  text-shadow: 0 0 5px #fff,
			  0 0 10px rgb(57, 154, 211),
			  0 0 15px rgb(104, 166, 202),
			  0 0 20px #c5d7e2,
			  0 0 35px #c5d7e2,
			  0 0 40px #fff,
			  0 0 50px #fff,
			  0 0 75px #fff;
			}
			
			div {
			  position: absolute;
			  left: 50%;
			  top: 50%;
			  transform: translate(-50%, -50%);
			}
			
			.face {
			  width: 200px;
			  height: 150px;
			  background: white;
			  top: 40%;
			  border-radius: 46% 57% 65% 32% / 76% 59% 42% 26%;
			}
			
			.eye1,
			.eye2 {
			  width: 15px;
			  height: 15px;
			  background: black;
			  border-radius: 50%;
			}
			
			.eye1 {
			  top: 35%;
			  left: 40%;
			}
			
			.eye2 {
			  top: 30%;
			  left: 60%;
			
			}
			
			.blush1, .blush2 {
			  width: 30px;
			  height: 30px;
			  background: pink;
			  border-radius: 50%;
			  transform: rotate(90deg);
			}
			
			.blush1 {
			  top: 40%;
			  left: 70%;
			}
			
			.blush2 {
			  top: 40%;
			  left: 25%;
			}
			
			.nose {
			  width: 25px;
			  height: 80px;
			  background: orange;
			  top: 12%;
			  left: 63%;
			  transform: rotate(50deg);
			  border-radius: 50% 50% 40% 40% / 100% 100% 10% 10%;
			  z-index: 2;
			}
			
			.teeth1, .teeth2 {
			  width: 30px;
			  height: 30px;
			  background: white;
			
			  z-index: -1;
			  border-radius: 5px;
			}
			
			.teeth1 {
			  top: 125%;
			  left: 30%;
			}
			
			.teeth2 {
			  top: 125%;
			  left: 70%;
			}
			
			.body {
			  width: 250px;
			  height: 250px;
			  background: white;
			  top: 150%;
			  border-radius: 40% 30% 30% 70% / 60% 40% 60% 40%;
			  z-index: -1;
			}
			
			.feet1, .feet2 {
			  width: 100px;
			  height: 80px;
			  background: white;
			  top: 200%;
			  z-index: -1;
			}
			
			.feet1 {
			
			  transform: rotate(30deg);
			  left: -10%;
			  border-radius: 50% 50% 59% 66% / 36% 65% 38% 65%;
			}
			
			.feet2 {
			  transform: rotate(-30deg);
			  left: 60%;
			  border-radius: 50% 50% 59% 66% / 36% 65% 38% 65%;
			
			}
			
			.hat {
			  width: 145px;
			  height: 40px;
			  background: crimson;
			  border-radius: 46% 57% 65% 32% / 100% 100% 0% 0%;
			  top: -20px;
			  left: 60px;
			  transform: translate(-50%, 0) rotate(160deg);
			  z-index: -1;
			}
			
			.hat3 {
			  width: 160px;
			  height: 130px;
			  background: black;
			  border-radius: 46% 57% 65% 32% / 100% 100% 20% 20%;
			  top: -90px;
			  left: 50px;
			  transform: translate(-50%, 0) rotate(160deg);
			  z-index: -2;
			}
			
			.hat2 {
			  width: 200px;
			  height: 50px;
			  background: black;
			  border-radius: 40% 40% 40% 40% / 40% 40% 40% 40%;
			  top: -10px;
			  left: 70px;
			  transform: translate(-50%, 0) rotate(-20deg);
			  z-index: -1;
			}
			
			.mustache {
			  width: 100px;
			  height: 80px;
			  background: white;
			  border-radius: 50% 50% 59% 66% / 100% 100% 56% 51%;
			  top: 155px;
			  left: 20%;
			  transform-origin: top right;
			  transform: translate(-100%, 0) rotate(25deg);
			  z-index: 1;
			}
			
			.mustache+.mustache {
			  left: 170px;
			  border-radius: 50% 50% 59% 66% / 100% 100% 56% 51%;
			  transform-origin: top left;
			  transform: rotate(-25deg);
			}
			
			.mouth {
			  width: 65px;
			  height: 50px;
			  border: 5px solid black;
			  border-radius: 50%;
			  top: 63px;
			  left: 70px;
			  z-index: 1;
			  transform: rotate(5deg);
			  clip-path: polygon(0% 55%, 100% 55%, 100% 100%, 0% 100%);
			}
			
			
			.mouth_small {
			  width: 15px;
			  height: 10px;
			  border: 3px solid black;
			  border-radius: 50%;
			  top: 80px;
			  left: 60px;
			  z-index: 1;
			  transform: rotate(-25deg);
			  clip-path: polygon(0% 55%, 100% 55%, 100% 100%, 0% 100%);
			}
			
			.button1,.button2 {
			  width: 35px;
			  height: 35px;
			  background: crimson;
			}
			
			.button1 {
			  top: 180%;
			  left: 65%;
			  border-radius: 50% 50% 31% 66% / 36% 65% 38% 65%;
			}
			
			.button2 {
			  top: 140%;
			  left: 65%;
			  border-radius: 50% 50% 31% 66% / 36% 65% 38% 65%;
			}
			
			.dot1,.dot2,.dot3,.dot4,.dot5,.dot6,.dot7,.dot8 {
			  width: 5px;
			  height: 5px;
			  background: black;
			  border-radius: 50%;
			}
			
			.dot1 {
			  top: 175%;
			  left: 63%;
			
			}
			
			.dot2 {
			  top: 175%;
			  left: 67%;
			}
			
			.dot3 {
			  top: 182%;
			  left: 63%;
			}
			
			.dot4 {
			  top: 182%;
			  left: 67%;
			}
			
			.dot5 {
			  top: 135%;
			  left: 63%;
			}
			
			.dot6 {
			  top: 135%;
			  left: 67%;
			}
			
			.dot7 {
			  top: 142%;
			  left: 63%;
			}
			
			.dot8 {
			  top: 142%;
			  left: 67%;
			}
			.scarf1,.scarf2,.scarf3,.scarf4,.scarf5 {
			  background: red;
			}
			
			.scarf1 {
			  width: 160px;
			  height: 40px;
			  top: 100%;
			  left: 40%;
			  border-radius: 50% 50% 31% 66% / 36% 65% 38% 65%;
			}
			
			.scarf2 {
			  width: 100px;
			  height: 40px;
			  top: 80%;
			  left: 55%;
			  transform: rotate(-30deg);
			  border-radius: 50% 50% 31% 66% / 36% 65% 38% 65%;
			}
			
			.scarf3 {
			  width: 70px;
			  height: 60px;
			  top: 85%;
			  left: 45%;
			  transform: rotate(-30deg);
			  border-radius: 50% 50% 31% 66% / 36% 65% 38% 65%;
			}
			
			.scarf4 {
			  width: 60px;
			  height: 130px;
			  top: 90%;
			  left: 16%;
			  transform: rotate(40deg);
			  border-radius: 50% 50% 31% 45% / 36% 65% 5% 65%;
			}
			
			.scarf5 {
			  width: 60px;
			  height: 70px;
			  top: 90%;
			  left: 70%;
			  transform: rotate(-40deg);
			  z-index: 1;
			  border-radius: 50% 50% 31% 66% / 36% 65% 0% 65%;
			}
			.tree1 ,.tree2,.tree3 {
			  background: brown;
			  border-radius: 50% 50% 31% 66% / 36% 65% 38% 65%;
			  z-index: -3;
			
			}
			
			.tree1 {
			  width: 7px;
			  height: 125px;
			  top: -90%;
			  left: 0%;
			  transform: rotate(-20deg);
			}
			
			.tree2 {
			  width: 7px;
			  height: 85px;
			  top: -90%;
			  left: 0%;
			  transform: rotate(10deg);
			}
			
			.tree3 {
			  width: 7px;
			  height: 35px;
			  top: -80%;
			  left: -10%;
			  transform: rotate(-40deg);
			}
			.bird1 {
			  width: 65px;
			  height: 35px;
			  background: teal;
			  top: 50%;
			  left: 108%;
			  border-radius: 50% 50% 31% 66% / 36% 65% 38% 65%;
			  transform: rotate(-20deg);
			  z-index: -3;
			}
			
			.bird2 {
			  width: 35px;
			  height: 35px;
			  background: teal;
			  top: 35%;
			  left: 120%;
			  border-radius: 50% 50% 31% 66% / 36% 65% 38% 65%;
			  transform: rotate(-40deg);
			  z-index: -3;
			}
			
			.bird3 {
			  width: 15px;
			  height: 15px;
			  background: orange;
			  top: 36%;
			  left: 134%;
			  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
			  transform: rotate(70deg);
			  z-index: -5;
			}
			
			.bird4 {
			  width: 5px;
			  height: 5px;
			  background: white;
			  top: 40%;
			  left: 128%;
			  border-radius: 50%;
			  transform: rotate(90deg);
			}
			
			.bird5 {
			  width: 25px;
			  height: 2px;
			  background: brown;
			  top: 80%;
			  left: 115%;
			  border-radius: 10px;
			  transform: rotate(-90deg);
			}
			
			.bird6 {
			  width: 25px;
			  height: 2px;
			  background: brown;
			  top: 78%;
			  left: 123%;
			  border-radius: 10px;
			  transform: rotate(-90deg);
			}
			
			.bird7 {
			  width: 40px;
			  height: 17px;
			  background: lightblue;
			  top: 55%;
			  left: 110%;
			  border-radius: 50% 50% 31% 66% / 36% 65% 38% 65%;
			  transform: rotate(-20deg);
			}
			
			.bird8 {
			  width: 20px;
			  height: 7px;
			  background: teal;
			  top: 35%;
			  left: 118%;
			  border-radius: 50% 50% 31% 66% / 36% 65% 38% 65%;
			  transform: rotate(20deg);
			}
			
			.bird9 {
			  width: 2px;
			  height: 15px;
			  background: brown;
			  top: 80%;
			  left: 120%;
			  border-radius: 50% 50% 31% 66% / 36% 65% 38% 65%;
			  transform: rotate(10deg);
			  z-index: 2;
			}
			
			.bird10 {
			  width: 2px;
			  height: 15px;
			  background: brown;
			  top: 80%;
			  left: 121.5%;
			  border-radius: 50% 50% 31% 66% / 36% 65% 38% 65%;
			  transform: rotate(-10deg);
			  z-index: 2;
			}
			
			.bird11 {
			  width: 2px;
			  height: 15px;
			  background: brown;
			  top: 80%;
			  left: 128%;
			  border-radius: 50% 50% 31% 66% / 36% 65% 38% 65%;
			  transform: rotate(10deg);
			  z-index: 2;
			}
			
			.bird12 {
			  width: 2px;
			  height: 15px;
			  background: brown;
			  top: 80%;
			  left: 129.5%;
			  border-radius: 50% 50% 31% 66% / 36% 65% 38% 65%;
			  transform: rotate(-10deg);
			  z-index: 2;
			}
			
			.bird13 {
			  width: 20px;
			  height: 7px;
			  background: teal;
			  top: 35%;
			  left: 118%;
			  border-radius: 50% 50% 31% 66% / 36% 65% 38% 65%;
			  transform: rotate(80deg);
			}
			
			a {
			  color: white;
			  font-size: 150px
			}
			
			@keyframes fall {
			  0% {
			    top: -20%;
			  }
			
			  100% {
			    top: 100%;
			  }
			}
			
			.flake {
			  position: fixed;
			  top: -20%;
			  animation: fall 10s linear infinite;
			}
			
			.flake:nth-last-of-type(0) {
			  left: 0%;
			  animation-delay: 0s;
			}
			
			.flake:nth-last-of-type(1) {
			  left: 0%;
			  animation-delay: 0s;
			}
			
			.flake:nth-last-of-type(2) {
			  left: 10%;
			  animation-delay: 3s;
			}
			
			.flake:nth-last-of-type(3) {
			  left: 20%;
			  animation-delay: 5s;
			}
			
			.flake:nth-last-of-type(4) {
			  left: 30%;
			  animation-delay: 2s;
			}
			
			.flake:nth-last-of-type(5) {
			  left: 40%;
			  animation-delay: 1s;
			}
			
			.flake:nth-last-of-type(6) {
			  left: 50%;
			  animation-delay: 4s;
			}
			
			.flake:nth-last-of-type(7) {
			  left: 60%;
			  animation-delay: 3s;
			}
			
			.flake:nth-last-of-type(8) {
			  left: 70%;
			  animation-delay: 2s;
			}
			
			.flake:nth-last-of-type(9) {
			  left: 80%;
			  animation-delay: 0s;
			}
			
			.flake:nth-last-of-type(10) {
			  left: 90%;
			  animation-delay: 6s;
			}