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;
  }
}

• 洗漱包旅行套装 男出差商务洗簌袋便携化妆包女用品洗护大容量
• 蓝罐（Kjeldsens）曲奇饼干礼盒 454g 丹麦原装进口 休闲零食 节日送礼福利团购
• 适用于新款车载手机支架无线器快充智能自动感应汽车
• 皇顺适配名爵MG7汽车用品MG6PRO改装饰配件MG5门槛条ZS保护贴