【至臻】自制捂脸表情【有需要的看一下，没需要的无所谓。】
我不喜欢说废话。（我不是不喜欢说废话，我是不知道该怎么说。）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
position: relative;
width: 200px;
height: 200px;
}
.small {
width: 200px;
height: 200px;
border-radius: 50%;
background: gold;
position: relative;
overflow: hidden;
}
.eyes {
position: absolute;
top: 60px;
left: 42px;
width: 40px;
height: 20px;
border-radius: 50%;
box-shadow: inset 6px 8px #804000;
transform: rotate(32deg);
z-index: 9;
}
.mouth {
width: 100px;
height: 100px;
background: #DEB887;
border-radius: 50%;
margin: 57px 0 0 39px;
border: 6px solid #DAA520;
}
.nose {
background: gold;
width: 120px;
height: 100px;
position: absolute;
left: 42px;
top: 23px;
transform: rotate(20deg);
}
.tooth {
width: 107px;
height: 10px;
background: #ffffff;
position: absolute;
top: 106px;
}
.water {
width: 38px;
height: 124px;
background-image: linear-gradient(rgba(105,105,255), rgba(0,0,255));
position: absolute;
top: 56px;
left: 11px;
transform: rotate(34deg);
z-index: 5;
}
.water:nth-child(2) {
top: 72px;
left: 120px;
transform: rotate(-4deg);
}
.palm {
width: 60px;
height: 130px;
border-radius: 46%;
background: gold;
position: absolute;
bottom: 5px;
right: 0px;
z-index: 6;
border: 6px solid #DAA520;
transform: rotate(-12deg);
z-index: 10;
}
.finger2 {
width: 60px;
height: 30px;
background: gold;
border-radius: 50% 40% 30% 40%/ 80% 20% 20% 80%;
border-top: 6px solid #DAA520;
border-left: 6px solid #DAA520;
position: absolute;
top: -18px;
left: -25px;
transform: rotate(50deg);
}
.finger3 {
width: 70px;
height: 20px;
background: gold;
border-radius: 50% 40% 50% 40%/ 80% 20% 20% 80%;
border-top: 6px solid #DAA520;
border-bottom: 6px solid #DAA520;
border-left: 6px solid #DAA520;
position: absolute;
top: -21px;
left: -51px;
transform: rotate(50deg);
}
.finger4 {
width: 60px;
height: 16px;
background: gold;
border-radius: 50% 40% 50% 40%/ 80% 20% 20% 80%;
border-top: 6px solid #DAA520;
border-bottom: 6px solid #DAA520;
border-left: 6px solid #DAA520;
position: absolute;
top: -5px;
left: -60px;
transform: rotate(50deg);
z-index: 11
}
.finger5 {
width: 30px;
height: 18px;
background: gold;
border-radius: 50% 40% 50% 40%/ 50% 40% 50% 40%;
border-top: 6px solid #DAA520;
border-bottom: 6px solid #DAA520;
border-left: 6px solid #DAA520;
position: absolute;
top: 9px;
left: -60px;
transform: rotate(50deg);
}
.meat1 {
width: 30px;
height: 30px;
background: gold;
border-radius: 50% 40% 50% 40%/ 80% 20% 20% 80%;
position: absolute;
top: 20px;
left: -22px;
z-index: 13;
}
.meat2{
width: 56px;
height: 10px;
background: gold;
border-radius: 50% 40% 50% 40%/ 80% 20% 20% 80%;
border-bottom: 6px solid #DAA520;
position: absolute;
top: 36px;
left: -52px;
transform: rotate(28deg);
}
</style>
</head>
<body>
<div class="box">
<div class="small">
<div class="eyes"></div>
<div class="water"></div>
<div class="water"></div>
<div class="nose">
<div class="tooth"></div>
</div>
<div class="mouth"></div>
</div>
<div class="palm">
<div class="finger2"></div>
<div class="finger3"></div>
<div class="finger4"></div>
<div class="finger5"></div>
<div class="meat1"></div>
<div class="meat12></div>
</div>
</div>
</body>
</html>
好了，就分享这么多了，顺便说一下，至臻是懒的借口。
