SOURCE

console 命令行工具 X clear

                    
>
console
<div class="elephant">
  <div class="body"></div>
  <div class="head">
    <div class="eye"></div>
  </div>
  <div class="tooths">
      <div class="tooth_1"></div>
       <div class="trunk"></div>
      <div class="tooth_2"></div>
  </div>
  <div class="thigh">
      <div class="thigh_1"></div>
      <div class="thigh_2"></div>
      <div class="thigh_3"></div>
      <div class="thigh_4"></div>
  </div>
  <div class="tail"></div>
</div>
    body {
      background-color: #87CEEB;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

    .elephant {
      position: relative;
      width: 200px;
      height: 120px;
    }

    .body {
      background-color: #808080;
      width: 120px;
      height: 80px;
      border-radius: 20px;
      position: absolute;
      bottom: 20px;
      left: 50px;
    }

    .head {
      background-color: #808080;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      position: absolute;
      top: 0;
      left: 60px;
    }

    .eye {
       background-color: #000;
        width: 14px;
        height: 6px;
        border-radius: 50%;
        position: absolute;
        top: 30px;
        left: 3px;
        transform: rotate(0deg);
    }
    .eye::before{
        content: "";
        width: 4px;
        height: 2px;
        background: #fff;
        border-radius: 50px 50px 0 0;
        position: absolute;
        transform: translate(-50%, 0);
        left: 50%;
        display: block;
    }
    .trunk {
        background-color: transparent;
        width: 21px;
        height: 80px;
        position: absolute;
        top: -26px;
        left: -32px;
        border-radius: 50%;
        border-right: 15px solid #808080;
        border-top: 15px solid #808080;
        transform: rotate(335deg);
    }
    .tooths{
        position: absolute;
        width: 23px;
        height: 50px;
        left: 26px;
        top: 34px;
        transform: rotate(245deg);
        /* z-index: -1; */
    }
    .tooths .tooth_1,.tooths .tooth_2{
        width: 10px;
        height: 50px;
        background: transparent;
        border-left:10px solid #fff; 
        border-radius:50%;
        position: absolute;
    }
    .tooths .tooth_1::before,.tooths .tooth_2::before{
        content: "";
        width: 10px;
        height: 50px;
        background: transparent;
        border-left:10px solid #87CEEB; 
        border-radius:50%;
        position: absolute;
        left: -5px;
        top: -6px;

    }
    .tooths .tooth_2{
        left: 5px;
        top: -1px;
        transform: rotate(12deg);
    }
    .thigh{
      width: 120px;
      height: 80px;
      position: absolute;
      bottom: -45px;
      left: 50px;
    }
    .thigh_1,.thigh_2,.thigh_3,.thigh_4{
        width: 16px;
        height: 50px;
        background: #808080;
        position: absolute;

    }
    .thigh_1{
        transform: rotate(17deg);
        left: 10px;

    }
    .thigh_2{
        transform: rotate(-17deg);
        left: 23px;

    }
    .thigh_3{
        transform: rotate(17deg);
        right: 40px;
    }
      .thigh_4{
        transform: rotate(-17deg);
        right: 15px;
    }
    .tail{
        background-color: transparent;
        width: 12px;
        height: 39px;
        position: absolute;
        top: 16px;
        right: 24px;
        border-radius: 50%;
        border: 3px solid #808080;
        /* border-top: 15px solid #808080; */
        transform: rotate(131deg);
    }