CSS绘制大象

            
            $background: #DEC0F1;
$body: #957FEF;
$shadows: #7161EF;
$smoke: #EDF2F4;
$water:#93BDFF;
$yellow: #FFE66D;
$black: #5D50C4;
$orange:#FC9649;

body {
  background-color: $background;
  display:flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  margin:0;
}
.container{
  width: 600px;
  height: 420px;
  background: none;
  // border:1px solid white;
  animation: shake 5s linear infinite;
}
.body {
  position: absolute;
  top: 8%;
  width:60%;
  height:54%;
  background-color: $body;
  border-radius:90px;
  z-index: 1;
}
.body-in {
  position: absolute;
  top: 8%;
  width:100%;
  height:100%;
  background-color: $body;
  border-radius:90px;
  z-index: 1;
}
.leg-front, .leg-back, .leg-front-back {
  position: absolute;
  width: 17%;
  height: 30%;
  background-color: $body;
  border-radius:10px;
  bottom:-23%;
}
.leg-front-back {
  background-color: $shadows;
  left:71%;
  bottom:-21%;
  z-index: -1;
}
.leg-back {
  left:12%
}
.leg-front {
  left:66%;
  animation: stomp 5s linear infinite;
}
.leg-back:before {
  position: absolute;
  content: '';
  background-color: $shadows;
  border-radius:10px;
  width: 100%;
  height: 100%;
  z-index:-1;
  left:30%;
  bottom:7%;
}
.tail {
  position: absolute;
  width: 7%;
  height: 40%;
  left: -10%;
  top:40%;
  border-top-left-radius: 100px;
  border: 15px solid $body;
  border-right:0;
  border-bottom:0;
  z-index:-1;
}
.tail:after {
  position: absolute;
  content: '';
  left:-85%;
  top:90%;
  height: 40%;
  width: 112%;
  background-color: $shadows;
   -webkit-clip-path: polygon(0% 100%, 25% 0%, 75% 0%,100% 100%, 66% 75%, 50% 100%, 33% 75%,  25% 75%);
clip-path: polygon(0% 100%, 25% 0%, 75% 0%,100% 100%, 66% 75%, 50% 100%, 33% 75%,  25% 75%);
}
.head {
  width: 36%;
  height: 50%;
  position: absolute;
  background-color: $body;
 border-radius: 50%;
  right:25%;
  top:-10%;
  z-index: 2;
   animation: head-shake 5s linear infinite;
}
.head-in {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  background-color: $body;
  border-radius: 50% 40% 40% 50%;
}
.ear {
  width: 67%;
  height: 89%;
  position: absolute;
  background-color: $shadows;
  border-radius: 50% 20% 40% 50%;
}
.trump {
  position: absolute;
  width: 15%;
  height: 50%;
  right: -50px;
  top:40%;
  border-top-right-radius: 100px;
  border: 35px solid $body;
  border-left:0;
  border-bottom:0;
  z-index:-1;
}
.trump:after {
  content: '';
  // border-top-left-radius: 100px;
  width: 10px;
  height: 3px;
  background-color: $black;
  border-bottom: 0;
  border-right: 0;
  position: absolute;
  right:-106%;
  top:60%;
  box-shadow:0 15px 0 0 $black, 0 -15px 0 0 $black;;
}
.trump-bottom {
  position: absolute;
  content: '';
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  border: 35px solid $body;
  bottom:-35%;
  right:-125px;
  border-top:0;
  width: 40px;
  height:25px;
}
.trump-bottom:after {
  position: absolute;
  content: '';
  top:-18px;
  left:100%;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: $body;
}
.drop {
  position: absolute;
  width:20px;
  height:20px;
  background-color:$water;
  border-radius: 50% 50% 50% 0;
}
.drop1 {
  left:160%;
  top: 85%;
  animation: drop1 5s linear infinite;
}
.drop2 {
  left:148%;
  top: 80%;
  animation: drop2 5s linear infinite;
}
.drop3 {
  left:135%;
  top: 85%;
  animation: drop3 5s linear infinite;
}
.eye {
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  border: 3px solid $black;
  width: 15px;
  height: 10px;
  border-bottom: 0;
  position: absolute;
  right:13%;
  top:35%;
}
.mouth {
  border-bottom-left-radius: 100px;
  border: 3px solid $black;
  width: 20px;
  height: 15px;
  border-top: 0;
  border-right: 0;
  position: absolute;
  right:5%;
  top:70%;
}
.water {
  position: absolute;
  background-color: $water;
  width:110%;
  height:13%;
  bottom:19%;
  left:-10%;
  border-radius: 50%;
  z-index: -1;
}
.bird {
  position: absolute;
  top:-11%;
  left:50%;
  width: 12%;
  height: 12%;
  border-radius: 50%;
  background-color: $yellow;
}
.bird-body {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: $yellow;
}
.bird-body:after {
  position: absolute;
  content: '';
  background-color: $black;
  width: 10%;
  height: 10%;
  border-radius:50%;
  right:30%;
  top:30%;
}
.bird-beak {
  position: absolute;
  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
  background-color: $orange;
  height: 30%;
  width: 40%;
  left:85%;
  top:40%;
  transform:rotate(15deg)
}
.bird-tail {
  position: absolute;
  content: '';
  left:-50%;
  top:45%;
  height: 100%;
  width: 100%;
  background-color: $yellow;
   -webkit-clip-path: polygon(0% 100%, 25% 0%, 75% 0%,100% 100%, 66% 75%, 50% 100%, 33% 75%,  25% 75%);
clip-path: polygon(0% 100%, 25% 0%, 75% 0%,100% 100%, 66% 75%, 50% 100%, 33% 75%,  25% 75%);
  transform:rotate(90deg);
  z-index: -1;
}
@keyframes drop1 {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(-20deg);
  }
  39% {
    opacity: 0;
    transform: translate(0, 0) rotate(-20deg);
  }
  40% {
    opacity: 1;
    transform: translate(0, 0) rotate(-20deg);
  }
    49% {
    opacity: 1;
    transform: translate(15px, -15px) rotate(-20deg);
    }
   50% {
    opacity: 0;
    transform: translate(15px, -15px) rotate(-20deg);
    }
    100% {
    opacity: 0;
    transform: translate(15px, -15px) rotate(-20deg);
    }
 }
@keyframes drop2 {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(-45deg);
  }
  39% {
    opacity: 0;
    transform: translate(0, 0) rotate(-45deg);
  }
  40% {
    opacity: 1;
    transform: translate(0px, 0px) rotate(-45deg);
  }
   49% {
    opacity: 1;
    transform: translate(0px, -15px) rotate(-45deg);
    }
  50% {
    opacity: 0;
    transform: translate(0px, -15px) rotate(-45deg);
    }
  100% {
    opacity: 0;
    transform: translate(0px, -15px) rotate(-45deg);
    }
 }
@keyframes drop3 {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(-80deg);
  }
  39% {
    opacity: 0;
    transform: translate(0, 0) rotate(-80deg);
  }
  40% {
    opacity: 1;
    transform: translate(0, 0) rotate(-80deg);
  }
   49% {
    opacity: 1;
    transform: translate(-15px, -15px) rotate(-80deg);
  }
  50% {
    opacity: 0;
    transform: translate(-15px, -15px) rotate(-80deg);
  }
  100% {
    opacity: 0;
    transform: translate(-15px, -15px) rotate(-80deg);
    }
 }

@keyframes stomp {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(-10px);
  }
  35% {
    transform: translateY(-15px);
    }
  40% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(0px);
  }
 }
@keyframes shake {
  40%{
    transform: translate3d(-1px, 0, 0);
  }
  
  43% {
    transform: translate3d(2px, 0, 0);
  }

   46%{
    transform: translate3d(-2px, 0, 0);
  }

  49% {
    transform: translate3d(4px, 0, 0);
  }
}
@keyframes head-shake {
  0% {
    transform: rotate(0);
  }
  10% {
    transform: rotate(1deg);
  }
  20% {
    transform: rotate(0);
    }
  40% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(0);
  }
 }