【至臻】自制捂臉表情【有需要的看一下，沒需要的無所謂?！?/h1>
我不喜歡說廢話。（我不是不喜歡說廢話，我是不知道該怎么說。）
<!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>
好了，就分享這么多了，順便說一下，至臻是懶的借口。
