div+css布局实现一个口红效果代码-html代码-BFW代码库

div+css布局实现一个口红效果代码

代码语言：html

代码描述：div+css布局实现一个口红效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
<style>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  background-color: #cd00cd;
}

.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-r.........完整代码请登录后点击上方下载按钮下载查看