SOURCE

console 命令行工具 X clear

                    
>
console
<div class="piggy">
  <span class="ears"></span>
  <span class="eyes"></span>
  <span class="nose"></span>
</div>
body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: skyblue;
}

.piggy::before,
.piggy::after,
.piggy *::before, 
.piggy *::after {
  content: '';
  position: absolute;
}

.piggy {
  width: 12em;
  height: 10em;
  font-size: 30px; /*调整大小*/
  background-color: #50a032;
  border: 0.2em solid #2b4d13;
  border-radius: 50% 50% 50% 50% / 55% 60% 40% 45%;
  position: relative;
  box-shadow: 
    inset -1.5em 1em 1.5em 0.5em rgba(255, 255, 255, 0.3),
    inset 0.5em -0.5em 0.8em 0.2em rgba(0, 0, 0, 0.2)
  ;
}
.piggy::before,
.piggy::after {
  width: 1.4em;
  height: 1em;
  border-top: 0.5em solid #0f2d00;
  border-radius: 50% 50% 0 0 / 40% 40% 0 0;
  top: 2.3em;
}
.piggy::before {
  left: 1.2em;
  transform: rotate(-20deg);
}
.piggy::after {
  right: 1em;
  transform: rotate(25deg);
}

.eyes::before,
.eyes::after {
  width: 2.8em;
  height: 2.8em;
  border: 0.1em solid #193c09;
  background:
    radial-gradient(
      circle at var(--eyeball) 1.5em,
      #333 0.4em,
      transparent 0.4em
    ), 
    #fff
  ;
  box-shadow: 
    inset 0.3em -0.6em 0.5em -0.2em rgba(0, 0, 0, 0.3),
    -0.1em 0.5em 0.2em 0.1em rgba(68, 132, 36, 0.6)
  ;
  border-radius: 50%;
  top: 3.6em;
}
.eyes::before {
  --eyeball: 1em;
  left: 0.8em;
}
.eyes::after {
  --eyeball: 1.9em;
  right: 0.3em;
}

.ears::before,
.ears::after {
  width: 0.8em;
  height: 0.9em;
  border: 0.1em solid #1d3a0d;
  background-color: #2f6317;
  border-radius: 45% 45% 45% 45% / 55% 45% 55% 45%;
}
.ears::before {
  color: #50a032;
  top: 0.3em;
  left: 1.3em;
  box-shadow:
    0.4em 0.7em 0 -0.2em,
    -0.2em 0.7em 0 -0.1em,
    -0.6em 0.5em 0 -0.2em,
    -0.1em -0.2em 0 0.4em,
    -0.1em -0.2em 0 0.6em #2b4d13
  ;
  transform: rotate(-40deg);
}
.ears::after {
  color: #5cb739;
  top: -1.1em;
  right: 5.8em;
  box-shadow:
    0.3em 0.6em 0 -0.2em,
    -0.1em 0.6em 0 -0.1em,
    -0.6em 0.6em 0 -0.2em,
    -0.1em -0.2em 0 0.4em,
    -0.1em -0.2em 0 0.6em #2b4d13
  ;
  transform: rotate(-6deg);
}

.nose {
  width: 4.6em;
  height: 4em;
  background-color: #82b923;
  border: 0.1em solid #1d3c07;
  border-radius: 50% 50% 45% 45% / 55% 55% 45% 45%;
  box-shadow: -0.1em 0.5em 0.2em 0.1em rgba(68, 132, 36, 0.6);
  position: absolute;
  top: 3em;
  left: 4.2em;
}
.nose::before,
.nose::after {
  width: 1.2em;
  border-radius: 50%;
  background-color: #0f2d00;
  box-shadow: inset -0.3em -0.2em 0.1em -0.1em #2d6b1f;
  top: 1.4em;
}
.nose::before {
  height: 1.8em;
  left: 0.8em;
}
.nose::after {
  height: 1.6em;
  right: 0.8em;
}