css口红💄

<div class="lipstick">
  <div class="bottom"></div>
  <div class="tip"></div>
  <div class="closingcap"></div>
</div>

css:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.lipstick {
  position: relative;
  background-size: 300px;
  height: 608px;
  width: 107px;
  animation: lipstick 3s infinite alternate;
}

.bottom {
  position: absolute;
  height: 180px;
  width: 80px;
  left: 16px;
  bottom: 11px;
  background: linear-gradient(to right, black 50%, silver 89%);
  border-bottom-left-radius: 20%;
  border-bottom-right-radius: 20%;
  border-top-left-radius: 10%;
  border-top-right-radius: 10%;
}

.bottom:after {
  position: absolute;
  content: '';
  height: 107px;
  width: 70px;
  left: 5px;
  bottom: 145px;
  border-radius: 42px / 20px;
  background: linear-gradient(to right, gold 50%, gold 79%);
}

.tip {
  position: absolute;
  height: 130px;
  width: 53px;
  left: 30px;
  bottom: 242px;
  border-radius: 50px / 30px;
  border-top-left-radius: 59px 141px;
  border-top-right-radius: 59px 141px;
  background: #FF748C;
  box-shadow: inset 0px 6px 9px red;
  animation: up 5s infinite alternate;
}

.closingcap {
  position: absolute;
  height: 154px;
  width: 80px;
  left: 16px;
  bottom: 152px;
  background: linear-gradient(to right, black 50%, silver 89%);
  border-top-left-radius: 20%;
  border-top-right-radius: 20%;
  border-bottom-left-radius: 10%;
  border-bottom-right-radius: 10%;
  animation: open 5s infinite alternate;
}

@keyframes open {
  0% {
    bottom: 152px;
    transform: rotate(0);
    left: 16px;
  }
  100% {
    bottom: 400px;
    transform: rotate(30deg);
    left: 46px;
  }
}

@keyframes up {
  0% {
    height: 0px;
  }
  100% {
    height: 140px;
  }
}