当前位置:首页>其他>css口红?

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;
  }
}
css口红?
一、本站上的部份代码及教程来源于互联网,仅供网友学习交流。如有侵权,无意侵害您的权益,请发送邮件至xutian#ahap.cn或点击右侧 联系我们,我们将尽快处理。
二、请勿将购买的资源教程转载或分享与他人!

给TA充电
共{{data.count}}人
人已充电
其他默认

css3美化半个字符 代码教程

2021-4-22 10:48:31

其他

酱茄开源小程序-MT运营库小蓝主题

2021-4-23 15:24:51

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索