纯css绘制口红效果-html代码-BFW代码库

纯css绘制口红效果

代码语言：html

代码描述：纯css绘制口红效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
.lipstick-container {
 position: relative;
  left: 30%;
    width: 500px;
    height: 800px;
}

.lipstick {
    background: rgb(255,228,189);
    background: rgb(255,228,189);
    background: linear-gradient(90deg, rgba(255,228,189,1) 0%, rgba(255,226,187,1) 5%, rgba(246,200,167,1) 8%, rgba(255,226,187,1) 11%, rgba(246,200,167,1) 13%, rgba(251,210,178,1) 15%, rgba(245,213,188,1) 17%, rgba(251,210,178,1) 20%, rgba(245,213,188,1) 23%, rgba(191,128,95,1) 25%, rgba(254,218,184,1) 29%, rgba(191,128,95,1) 31%, rgba(217,149,104,1) 33%, rgba(184,124,86,1) 39%, rgba(217,149,104,1) 41%, rgba(186,136,116,1) 44%, rgba(211,155,132,1) 47%, rgba(186,136,116,1) 50%, rgba(255,235,221,1) 53%, rgba(231,199,180,1) 57%, rgba(255,226,208,1) 58%, rgba(251,232,218,1) 62%, rgba(237,188,148,1) 66%, rgba(248,207,177,1) 68%, rgba(217,149,100,1) 71%, rgba(226,157,118,1) 76%, rgba(179,94,53,1) 80%, rgba(184,95,53,1) 84%, rgba(150,78,43,1) 89%);
    width: 153px;
    height: 290px;
    position: absolute;
    left: 245px;
top: 467px;
border-left: 2px solid #E2C2AB;
border-bottom: 4px solid #E2C2AB;
border-radius: 5px;
}


.lipstick-shadow {
    background: rgb(255,228,189);
    background: rgb(255,228,189);
    background: linear-gradient(90deg, rgba(255,228,189,1) 0%, rgba(255,226,187,1) 5%, rgba(246,200,167,1) 8%, rgba(255,226,187,1) 11%, rgba(246,200,167,1) 13%, rgba(251,210,178,1) 15%, rgba(245,213,188,1) 17%, rgba(251,210,178,1) 20%, rgba(245,213,188,1) 23%, rgba(191,128,95,1) 25%, rgba(254,218,184,1) 29%, rgba(191,128,95,1) 31%, rgba(217,149,104,1) 33%, rgba(184,124,86,1) 39%, rgba(217,149,104,1) 41%, rgba(186,136,116,1) 44%, rgba(211,155,132,1) 47%, rgba(186,136,116,1) 50%, rgba(255,235,221,1) 53%, rgba(231,199,180,1) 57%, rgba(255,226,208,1) 58%, rgba(251,232,218,1) 62%, rgba(237,188,148,1) 66%, rgba(248,207,177,1) 68%, rgba(217,149,100,1) 71%, rgba(226,157,118,1) 76%, rgba(179,94,53,1) 80%, rgba(184,95,53,1) 84%, rgba(150,78,43,1) 89%);
    width: 153px;
    height: 80px;
    position: absolute;
    left: 245px;
top: 758px;
opacity: 0.2;
border-radius: 5px;
box-shadow: inset 0px -25px 23px 0px rgba(255, 255, 255, 0.75);
}

.lipstick2{
    background: rgb(228,190,167);
    background: linear-gradient(90deg, rgba(228,190,167,1) 0%, rgba(255,225,191,1) 12%, rgba(249,210,179,1) 19%, rgba(255,228,208,1) 25%, rgba(246,205,175,1) 32%, rgba(135,73,52,1) 37%, rgba(216,147,106,1) 40%, rgba(216,147,106,1) 50%, rgba(216,147,106,1) 58%, rgba(135,73,52,1) 63%, rgba(223,178,155,1) 69%, rgba(255,236,204,1) 77%, rgba(197,112,71,1) 88%, rgba(181,75,36,1) 92%, rgba(215,129,82,1) 99%);
    width: 133px;
    height: 187px;
    position: absolute;
    left: 252px;
top: 232px;
border-left: 2px solid #E2C2AB;
z-index: 2;
border-radius: 5px;
border-top: 1px solid #814731;
}

.lipstick3{
    background: rgb(237,208,190);
    background: linear-gradient(90deg, rgba(237,208,190,1) 0%, rgba(25.........完整代码请登录后点击上方下载按钮下载查看