用纯css画出一个美女的侧面
代码语言：html
所属分类：其他
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Pure CSS Girl Portrait</title>
<style>
body {
background: #ffffff;
}
girl {
position: absolute;
left: 40%;
}
hair {
background: #fefbef;
height: 630px;
border-radius: 50% 0 0 0;
width: 310px;
top: 0px;
left: -195px;
position: absolute;
z-index: 999;
filter: blur(4px);
}
hair::after {
content: "";
transform: rotate(25deg);
background: #fefbef;
height: 240px;
width: 110px;
top: -5px;
left: 240px;
position: absolute;
z-index: 999;
filter: blur(4px);
}
hair1 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: 110px;
position: absolute;
z-index: 999;
filter: blur(2px);
border-left: 3px solid #fefbef;
}
hair2 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: 105px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #e2e2d7;
}
hair3 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: 100px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #fbfdef;
}
hair4 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: 95px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #e0d9d1;
}
hair5 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: 90px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #fbfdef;
}
hair6 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: 85px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #e0d9d1;
}
hair7 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: 80px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #fbfdef;
}
hair8 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: 75px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #e0d9d1;
}
hair9 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: 70px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #fbfdef;
}
hair10 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: 65px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #e0d9d1;
}
hair11 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: 60px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #fbfdef;
}
hair12 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: 55px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #e0d9d1;
}
hair13 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: 50px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #fbfdef;
}
hair14 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: 45px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #e0d9d1;
}
hair15 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: 40px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #fbfdef;
}
hair16 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: 35px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #e0d9d1;
}
hair17 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: 30px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #fbfdef;
}
hair18 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: 25px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #e0d9d1;
}
hair19 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: 20px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #fbfdef;
}
hair20 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: 15px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #e0d9d1;
}
hair21 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: 10px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #fbfdef;
}
hair22 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: 5px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #e0d9d1;
}
hair23 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: 0px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #fbfdef;
}
hair24 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: -5px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #e0d9d1;
}
hair25 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: -10px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #fbfdef;
}
hair26 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: -15px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #e0d9d1;
}
hair27 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: -20px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #fbfdef;
}
hair28 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: -25px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #e0d9d1;
}
hair29 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: -30px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #fbfdef;
}
hair30 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: -35px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #e0d9d1;
}
hair31 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: -40px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #fbfdef;
}
hair32 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: -45px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #e0d9d1;
}
hair33 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: -50px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #fbfdef;
}
hair34 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: -55px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #e0d9d1;
}
hair35 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: -60px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #fbfdef;
}
hair36 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: -65px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #e0d9d1;
}
hair37 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: -70px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #fbfdef;
}
hair38 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: -75px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #e0d9d1;
}
hair39 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: -80px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #fbfdef;
}
hair40 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: -85px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #e0d9d1;
}
hair41 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: -90px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #fbfdef;
}
hair42 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: -95px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #e0d9d1;
}
hair43 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: -100px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #fbfdef;
}
hair44 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: -105px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #e0d9d1;
}
hair45 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: -110px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #fbfdef;
}
hair46 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: -115px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #e0d9d1;
}
hair47 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: -120px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #fbfdef;
}
hair48 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: -125px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #e0d9d1;
}
hair49 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: -130px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #fbfdef;
}
hair50 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: -135px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #e0d9d1;
}
hair51 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: -140px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #fbfdef;
}
hair52 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: -145px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #e0d9d1;
}
hair53 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: -150px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #fbfdef;
}
hair54 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: -155px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #e0d9d1;
}
hair55 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: -160px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #fbfdef;
}
hair56 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: -165px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #e0d9d1;
}
hair57 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: -170px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #fbfdef;
}
hair58 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: -175px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #e0d9d1;
}
hair59 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: -180px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #fbfdef;
}
hair60 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: 0px;
left: -185px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #e0d9d1;
}
hair61 {
background: #876b5d;
height: 100px;
width: 60px;
top: -10px;
left: -105px;
transform: rotate(40deg);
position: absolute;
z-index: 999999;
filter: blur(40px);
}
hair62 {
background: #533626;
height: 100px;
width: 60px;
top: -10px;
left: -50px;
transform: rotate(40deg);
position: absolute;
z-index: 999999;
filter: blur(40px);
}
hair63 {
background: #3c2116;
height: 150px;
width: 60px;
top: -20px;
left: 10px;
transform: rotate(40deg);
position: absolute;
z-index: 999999;
filter: blur(40px);
}
hair64 {
background: #2f1a0c;
height: 150px;
width: 60px;
top: -20px;
left: 100px;
transform: rotate(40deg);
position: absolute;
z-index: 999999;
filter: blur(40px);
}
hair65 {
background: #6d4234;
height: 150px;
width: 10px;
top: -20px;
left: 180px;
transform: rotate(40deg);
position: absolute;
z-index: 999999;
filter: blur(20px);
}
hair66 {
background: #6d4234;
height: 150px;
width: 10px;
top: -20px;
left: -110px;
transform: rotate(40deg);
position: absolute;
z-index: 999999;
filter: blur(20px);
}
hair67 {
background: #9d877c;
height: 100px;
width: 300px;
top: 500px;
left: -190px;
position: absolute;
z-index: 999999;
filter: blur(60px);
}
hair68 {
background: #9d877c;
height: 400px;
width: 30px;
top: 200px;
left: -190px;
position: absolute;
z-index: 999999;
filter: blur(30px);
}
hair69 {
background: transparent;
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: -10px;
left: 125px;
transform: rotate(2deg);
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #e0d9d1;
}
hair70 {
background: transparent;
transform: rotate(6deg);
border-radius: 50% 0 0 0;
height: 630px;
width: 400px;
top: -20px;
left: 145px;
position: absolute;
z-index: 999999;
filter: blur(2px);
border-left: 3px solid #e0d9d1;
}
hair71 {
background: #fffcea;
height: 100px;
width: 200px;
top: -55px;
left: 138px;
transform: rotate(-200deg);
position: absolute;
z-index: 9999;
filter: blur(4px);
border-radius: 0% 100% 0% 100%;
}
hair71::after {
content: "";
background: #fffcea;
height: 100px;
width: 200px;
top: 20px;
left: 143px;
transform: rotate(-190deg);
position: absolute;
z-index: 9999;
filter: blur(4px);
border-radius: 0% 100% 0% 100%;
}
hair72 {
background: #68483b;
height: 70px;
width: 270px;
top: -45px;
left: 90px;
border-radius: 100%;
position: absolute;
z-index: 999999;
filter: blur(20px);
}
forehead {
clip-path: polygon(84% 1%, 91% 22%, 93% 32%, 97% 78%, 0 79%, 0 0);
background: #eedac1;
position: absolute;
width: 440px;
height: 250px;
left: -40px;
}
foreheadshadow::after {
content: "";
background: #f7ebdb;
width: 150px;
height: 200px;
position: absolute;
left: 130px;
border-radius: 100%;
filter: blur(20px);
}
foreheadshadow2::before {
content: "";
background: #cca98d;
position: absolute;
width: 120px;
height: 300px;
left: -30px;
filter: blur(40px);
top: -30px;
border-radius: 200px;
z-index: 99;
opacity: 2;
}
foreheadshadow::before {
content: "";
background: #cca98d;
position: absolute;
width: 100px;
height: 300px;
left: 250px;
filter: blur(40px);
transform: rotate(-20deg);
top: -30px;
border-radius: 200px;
z-index: 2;
opacity: 2;
}
noseup {
clip-path: polygon(64% 0, 43% 20%, 39% 25%, 38% 31%, 38% 37%, 0 37%, 0 36%, 0 0);
width: 180px;
height: 200px;
background: #f2dabe;
position: absolute;
top: 192.5px;
left: 274px;
z-index: -2;
box-shadow: inset -150px 0px 50px #f0d5b7;
}
nosebtw {
clip-path: polygon(50% 0%, 73% 0, 80% 27%, 93% 56%, 91% 66%, 78% 69%, 59% 68%, 46% 69%);
background: #f1dcbf;
position: absolute;
width: 270px;
height: 180px;
top: 250px;
left: 140px;
z-index: -2;
box-shadow: inset -100px 0px 100px #f0d5b7;
}
nshadow {
background: #c99d80;
width: 50px;
border-radius: 100%/100%;
height: 55px;
top: 340px;
left: 280px;
border-left: 7px solid #8e4228;
border-bottom: 4px solid #8e4228;
filter: blur(10px);
transform: rotate(20deg);
position: absolute;
}
nshadow::after {
content: "";
background: #f5e8d7;
width: 13px;
height: 45px;
transform: rotate(55deg);
top: -18px;
left: 60px;
position: absolute;
}
nosehole {
background: #d2a48d;
border-radius: 50%;
border-top: 2px solid #73261e;
width: 50px;
transform: rotate(-15deg);
height: 10px;
filter: blur(1px);
top: 380px;
left: 300px;
opacity: 0.6;
position: absolute;
}
nosehole::after {
content: "";
background: #5c110c;
position: absolute;
width: 30px;
height: 5px;
border-radius: 100%;
left: 20px;
filter: blur(2px);
opacity: 2;
top: -0.8;
transform: rotate(10deg);
}
nosehole::before {
content: "";
background: #9f6452;
position: absolute;
width: 30px;
height: 7px;
border-radius: 100%;
left: 20px;
opacity: 2;
top: 5px;
filter: blur(2px);
}
afternose {
background: #eedac1;
position: absolute;
width: 300px;
height: 200px;
left: 45px;
top: 300px;
z-index: -2;
opacity: 2;
border-radius: 0 0 60px 0px;
}
afternose::after {
content: "";
background: #ffffff;
position: absolute;
width: 25px;
height: 65px;
border-radius: 100%;
left: 290px;
top: 85px;
filter: blur(2px);
box-shadow: -20px 0px #ebccb7;
}
nose {
width: 120px;
height: 50px;
position: absolute;
background: #f1dcbf;
top: 340px;
left: 275px;
border-radius: 200px;
transform: rotate(-10deg);
box-shadow: inset -100px 0px 100px #f0d5b7;
}
nose::after {
content: "";
background: #c99d80;
width: 40px;
border-radius: 100%/ 60%;
height: 150px;
top: -120px;
left: 25px;
z-index: 99;
filter: blur(20px);
transform: rotate(-20deg);
position: absolute;
}
nose::before {
content: "";
background: #c99d80;
width: 110px;
height: 40px;
top: -1px;
z-index: 99;
border-radius: 100%/200%;
filter: blur(20px);
position: absolute;
}
lipup {
filter: blur(2px);
background: #eb5b64;
width: 20px;
height: 35px;
top: 445px;
left: 325px;
position: absolute;
border-radius: 200% 20% 200% 0%;
}
lipup::after {
background: #eb5b64;
width: 35px;
height: 35px;
top: -3px;
left: -25px;
position: absolute;
border-radius: 200%;
content: "";
}
lipup::before {
content: "";
clip-path: polygon(73% 7%, 91% 0, 94% 14%, 92% 13%, 88% 13%, 80% 13%, 75% 13%, 57% 14%);
background: #eb5b64;
width: 200px;
height: 250px;
top: 1px;
left: -200px;
position: absolute;
}
lipdown {
background: #eb5b64;
width: 50px;
height: 45px;
top: 475px;
left: 293px;
filter: blur(2px);
position: absolute;
border-radius: 100%;
box-shadow: -15px 5px 10px #c39385;
}
lipdown::before {
content: "";
clip-path: polygon(66% 0, 65% 13%, 64% 22%, 56% 18%, 46% 13%, 36% 7%, 24% 0);
background: #eb5b64;
width: 180px;
height: 180px;
top: 5px;
left: -99px;
position: absolute;
}
lipbtw {
clip-path: polygon(74% 5%, 81% 5%, 81% 8%, 20% 9%, 31% 6%, 40% 3%, 49% 1%, 56% 3%, 63% 4%);
background: #944a4b;
width: 142px;
height: 100px;
top: 472px;
z-index: 2;
left: 220px;
position: absolute;
opacity: 0.6;
}
lipshadow {
background: #ebd9cb;
filter: blur(5px);
width: 90px;
transform: rotate(-30deg);
height: 10px;
top: 446px;
left: 230px;
position: absolute;
box-shadow: 0px 13px 10px #d79386;
z-index: 2;
}
lipshadow::after {
content: "";
background: #ebd9cb;
filter: blur(10px);
width: 22px;
transform: rotate(-30deg);
height: 20px;
top: 10px;
left: 80px;
position: absolute;
box-shadow: 0px 13px 10px #d79386;
z-index: 2;
}
lipshadow2 {
background: #ebd9cb;
width: 60px;
transform: rotate(30deg);
height: 10px;
top: 495px;
left: 230px;
filter: blur(5px);
position: absolute;
z-index: 2;
}
lipshadow2::after {
content: "";
background: #f9eff0;
width: 40px;
transform: rotate(-30deg);
height: 10px;
top: -30px;
left: 60px;
filter: blur(4px);
position: absolute;
z-index: 4;
}
lipshadow2::before {
content: "";
background: #f9eff0;
width: 10px;
transform: rotate(-30deg);
height: 15px;
top: -20px;
left: 40px;
filter: blur(2px);
position: absolute;
z-index: 4;
}
lipshadow3 {
background: #810e13;
filter: blur(8px);
width: 40px;
height: 15px;
top: 465px;
left: 300px;
position: absolute;
border-radius: 100%;
z-index: 4;
}
lipshadow::before {
content: "";
background: #ff9696;
width: 32px;
transform: rotate(-30deg);
height: 30px;
top: 40px;
left: 50px;
filter: blur(10px);
position: absolute;
z-index: 4;
}
chinup {
background: #eedac1;
position: absolute;
width: 300px;
height: 135px;
left: 35px;
top: 430px;
z-index: -2;
opacity: 2;
border-radius: 0 0 10px 100px;
}
chinup::after {
content: "";
background: #ffffff;
position: absolute;
width: 35px;
height: 55px;
border-radius: 200%;
left: 285px;
top: 80px;
filter: blur(2px);
}
chin {
background: #eedac1;
position: absolute;
width: 300px;
height: 100px;
left: 39px;
top: 506px;
z-index: -2;
filter: blur(2px);
opacity: 2;
transform: rotate(15deg);
border-radius: 0 200px 200px 200px;
}
jawline {
clip-path: polygon(49% 0, 100% 0, 100% 43%, 100% 83%, 55% 70%, 41% 64%, 22% 46%, 13% 36%, 0 0);
background: #eedac1;
position: absolute;
width: 200px;
height: 200px;
left: -40px;
top: 430px;
z-index: -2;
opacity: 2;
}
contour1 {
background: #eedac1;
position: absolute;
width: 220px;
height: 250px;
left: -38px;
top: 190px;
z-index: 2;
opacity: 2;
}
contour1::after {
content: "";
background: #cca98d;
position: absolute;
width: 200px;
height: 520px;
left: -0px;
top: -100px;
border-radius: 200px;
z-index: 2;
transform: rotate(-20deg);
opacity: 2;
filter: blur(100px);
}
contour2 {
background: #d38c6e;
position: absolute;
width: 50px;
height: 400px;
left: 30px;
top: 100px;
border-radius: 200px;
z-index: 2;
filter: blur(40px);
transform: rotate(-30deg);
opacity: 2;
box-shadow: 10px 0px 100px #f9d6c2, -50px 10px 100px #b3714f, -130px 100px 100px #c0805c;
}
contour3 {
background: #b3846a;
position: absolute;
width: 200px;
height: 20px;
left: 140px;
top: 580px;
border-radius: 200px;
z-index: 2;
filter: blur(30px);
opacity: 2;
transform: rotate(20deg);
}
contour4 {
filter: blur(1px);
background: #eedac1;
width: 200px;
height: 100px;
position: absolute;
top: 440px;
transform: rotate(50deg);
left: -64px;
border-radius: 50%;
z-index: -2;
}
contour4::after {
content: "";
filter: blur(1px);
background: #eedac1;
width: 100px;
height: 400px;
position: absolute;
top: -250px;
transform: rotate(-50deg);
left: -150px;
border-radius: 50%;
z-index: -2;
}
chinshadow {
background: #f7e8d7;
width: 150px;
height: 100px;
position: absolute;
top: 520px;
transform: rotate(20deg);
left: 170px;
border-radius: 50%;
filter: blur(10px);
}
chinshadow::after {
content: "";
background: #a1725e;
width: 300px;
height: 20px;
position: absolute;
top: 80px;
left: -130px;
border-radius: 50%;
filter: blur(20px);
}
neck {
width: 300px;
height: 130px;
position: absolute;
background: #ccae8c;
top: 550px;
left: -90px;
z-index: -99;
bottom: 0;
}
neckleft {
width: 30px;
height: 90px;
position: absolute;
background: #ffffff;
top: 600px;
left: 200px;
border-radius: 100%;
z-index: -99;
bottom: 0;
}
neckshadow {
width: 200px;
height: 40px;
position: absolute;
background: #673729;
top: 600px;
left: 10px;
border-radius: 100%;
z-index: -99;
bottom: 0;
filter: blur(20px);
transform: rotate(20deg);
}
neckshadow2 {
width: 200px;
height: 40px;
position: absolute;
background: #e0c5a7;
top: 620px;
left: -50px;
border-radius: 100%;
z-index: -99;
bottom: 0;
filter: blur(20px);
}
neckshadow2::after {
content: "";
width: 300px;
height: 40px;
position: absolute;
background: #492c24;
top: -20px;
left: -40px;
border-radius: 100%;
z-index: -99;
bottom: 0;
filter: blur(2px);
}
eye2 {
position: absolute;
width: 10px;
height: 30px;
background: #b49d8f;
top: 210px;
filter: blur(2px);
border-radius: 200% 0% 200% 0;
transform: rotate(20deg);
z-index: 3;
left: 30px;
}
eye2shadow {
position: absolute;
width: 20px;
height: 20px;
background: #332932;
top: 220px;
filter: blur(1px);
transform: rotate(-40deg);
z-index: -3;
left: 335px;
}
eyebackground {
background: #eedac1;
width: 150px;
height: 150px;
z-index: -99;
position: absolute;
top: 195px;
left: 130px;
z-index: -1;
}
eyebrow1 {
position: absolute;
top: 165px;
left: 210px;
filter: blur(4px);
border-radius: 100% 0% 0 0;
background: #704b39;
width: 100px;
z-index: 2;
height: 25px;
transform: rotate(20deg);
}
eyebrow1::after {
content: "";
position: absolute;
left: -60px;
top: 42px;
filter: blur(2px);
border-radius: 100% 0% 0 0;
background: #704b39;
width: 80px;
height: 15px;
transform: rotate(-50deg);
}
brow1 {
position: absolute;
width: 10px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-right: 1px solid #7a533f;
background: transparent;
top: 180px;
z-index: 9999;
transform: rotate(20deg);
left: 300px;
}
brow2 {
position: absolute;
width: 10px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-right: 1px solid #7a533f;
background: transparent;
top: 179.5px;
z-index: 9999;
transform: rotate(20deg);
left: 298px;
}
brow3 {
position: absolute;
width: 20px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-right: 1px solid #7a533f;
background: transparent;
top: 179px;
z-index: 9999;
transform: rotate(10deg);
left: 284px;
}
brow4 {
position: absolute;
width: 10px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-right: 1px solid #7a533f;
background: transparent;
top: 178px;
z-index: 9999;
transform: rotate(20deg);
left: 298px;
}
brow5 {
position: absolute;
width: 10px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-right: 1px solid #7a533f;
background: transparent;
top: 177px;
z-index: 9999;
transform: rotate(20deg);
left: 296px;
}
brow6 {
position: absolute;
width: 10px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-right: 1px solid #7a533f;
background: transparent;
top: 177px;
z-index: 9999;
transform: rotate(20deg);
left: 294px;
}
brow7 {
position: absolute;
width: 10px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-right: 1px solid #7a533f;
background: transparent;
top: 176px;
z-index: 9999;
transform: rotate(20deg);
left: 292px;
}
brow8 {
position: absolute;
width: 10px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-right: 1px solid #7a533f;
background: transparent;
top: 176px;
z-index: 9999;
transform: rotate(20deg);
left: 290px;
}
brow9 {
position: absolute;
width: 10px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-right: 1px solid #7a533f;
background: transparent;
top: 176px;
z-index: 9999;
transform: rotate(20deg);
left: 288px;
}
brow10 {
position: absolute;
width: 10px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-right: 1px solid #7a533f;
background: transparent;
top: 175px;
z-index: 9999;
transform: rotate(20deg);
left: 286px;
}
brow11 {
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 176px;
z-index: 9999;
transform: rotate(160deg);
left: 284px;
}
brow12 {
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 176px;
z-index: 9999;
transform: rotate(160deg);
left: 282px;
}
brow13 {
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 175px;
z-index: 9999;
transform: rotate(160deg);
left: 276px;
}
brow14 {
position: absolute;
width: 15px;
height: 26px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 173px;
z-index: 9999;
transform: rotate(160deg);
left: 286px;
}
brow15 {
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 175px;
z-index: 9999;
transform: rotate(160deg);
left: 278px;
}
brow16 {
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 175px;
z-index: 9999;
transform: rotate(160deg);
left: 292px;
}
brow17 {
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 175px;
z-index: 9999;
transform: rotate(160deg);
left: 282px;
}
brow18 {
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 175px;
z-index: 9999;
transform: rotate(160deg);
left: 276px;
}
brow19 {
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 173px;
z-index: 9999;
transform: rotate(160deg);
left: 272px;
}
brow20 {
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 175px;
z-index: 9999;
transform: rotate(160deg);
left: 269px;
}
brow21 {
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 175px;
z-index: 9999;
transform: rotate(160deg);
left: 273px;
}
brow22 {
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 174px;
z-index: 9999;
transform: rotate(160deg);
left: 268px;
}
brow23 {
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 173px;
z-index: 9999;
transform: rotate(160deg);
left: 266px;
}
brow24 {
position: absolute;
width: 15px;
height: 27px;
filter: blur(1px);
border-radius: 100%;
border-left: 1px solid #7a533f;
background: transparent;
top: 172px;
z-index: 9999;
transform: rotate(.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0