感觉我写得技术含量不高，全都是用绝对定位写的，一定会有更好的，代码量更少的做法吧
<!DOCTYPE html>
<html>
<head>
<title>Cute Cat</title>
<style type="text/css">
*{
box-sizing: border-box;
}
:root{
--brown: #470000;
}
body{
background-color: #ffd2d2;
}
.cat {
position: absolute;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
margin: 50px auto 0;
}
.cat .ear{
position: absolute;
width: 160px;
height: 90px;
background-color: #fff;
border-radius: 52% / 52% ;
border: 2px solid var(--brown);
z-index: 5;
padding: 16px;
}
.cat .ear>div{
width: 100%;
height: 100%;
background-color: #fc1717;
border-radius: 52% / 52% ;
border: 1px solid #333
}
.cat .ear1{
top: 0;
left: -16px;
transform: rotate(45deg);
}
.cat .ear2{
top: 0;
right: -16px;
transform: rotate(135deg);
}
.cat .head{
position: relative;
width: 300px;
height: 220px;
background-color: #ffffff;
border-radius: 50%;
border: 2px solid var(--brown);
z-index: 8;
overflow: hidden;
}
.cat .head .decoration{
position: absolute;
top: -60px;
left: 50%;
transform: translateX(-50%);
height: 120px;
width: 62px;
background-color: #eee5bc;
border-radius: 50%;
border: 2px solid var(--brown);
overflow: hidden;
}
.cat .head .decoration::after{
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
height: 120px;
width: 30px;
border-radius: 50%;
border: 2px solid var(--brown);
}
.cat .eye{
position: absolute;
width: 58px;
height: 50px;
border-radius: 50%;
border: 1px solid var(--brown)
}
.cat .eye1{
top: 78px;
left: 60px;
}
.cat .eye1::before{
content: '';
position: absolute;
top: -10px;
left: -12px;
height: 20px;
width: 20px;
border-bottom: 1px solid var(--brown);
border-radius: 33%;
transform: rotate(20deg);
}
.cat .eye1::after{
content: '';
position: absolute;
top: 0;
left: -16px;
height: 20px;
width: 20px;
border-bottom: 1px solid var(--brown);
border-radius: 33%;
transform: rotate(20deg);
}
.cat .eye2{
top: 78px;
right: 60px;
}
.cat .eye2::before{
content: '';
position: absolute;
top: -10px;
right: -12px;
height: 20px;
width: 20px;
border-bottom: 1px solid var(--brown);
border-radius: 33%;
transform: rotate(-20deg);
}
.cat .eye2::after{
content: '';
position: absolute;
top: 0;
right: -16px;
height: 20px;
width: 20px;
border-bottom: 1px solid var(--brown);
border-radius: 33%;
transform: rotate(-20deg);
}
.cat .eye>div{
position: absolute;
bottom: 2px;
right: 2px;
border-radius: 50% 50% 50% 50%;
background-image: radial-gradient(circle,#fff 0%, #fff 12%, var(--brown) 22%, var(--brown) 100%);
height: 34px;
width: 36px;
}
.cat .mouth-wrap{
position: absolute;
bottom: 18px;
left: 50%;
transform: translateX(-50%);
}
.cat .mouth-wrap .nose{
position: relative;
width: 26px;
height: 18px;
border-radius: 50%;
background-color: var(--brown);
padding-top: 5px;
padding-left: 2px;
z-index: 4;
}
.cat .mouth-wrap .nose>div{
background: #fff;
width: 8px;
height: 4px;
border-radius: 50%;
filter: blur(2px);
}
.cat .mouth-wrap .fossa1{
position: absolute;
top: 18px;
left: -16px;
border-radius: 50%;
width: 30px;
height: 10px;
border-bottom: 1px solid var(--brown);
transform: rotate(-26deg);
background-color: #fff;
z-index: 3;
}
.cat .mouth-wrap .fossa2{
position: absolute;
top: 18px;
right: -16px;
border-radius: 50%;
width: 30px;
height: 10px;
border-bottom: 1px solid var(--brown);
transform: rotate(26deg);
background-color: #fff;
z-index: 3;
}
.cat .mouth-wrap .mouth{
position: relative;
width: 22px;
height: 40px;
background-color: #ff7070;
border-radius: 50%;
margin: 0 auto;
border: 1px solid var(--brown);
z-index: 2;
}
.cat .beard1{
position: absolute;
bottom: 20px;
left: 40px;
}
.cat .beard1>div{
width: 42px;
height: 16px;
border-top: 2px solid var(--brown);
border-radius: 33%;
transform: rotate(-8deg);
}
.cat .beard2{
position: absolute;
bottom: 20px;
right: 40px;
}
.cat .beard2>div{
width: 42px;
height: 16px;
border-top: 2px solid var(--brown);
border-radius: 33%;
transform: rotate(8deg);
}
.cat .body{
position: relative;
top: -70px;
width: 300px;
height: 260px;
background-color: #fff;
border-radius: 50%;
border: 2px solid var(--brown);
z-index: 7;
overflow: hidden;
}
.cat .body .ribbon{
position: relative;
top: -166px;
width: 300px;
height: 260px;
background-image: linear-gradient(to right, rgb(255, 0, 0), rgb(255, 174, 0));
border-radius: 50%;
border: 2px solid var(--brown);
z-index: 2;
}
.cat .body .bell{
position: absolute;
top: 80px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgb(255, 255, 0);
border: 2px solid var(--brown);
z-index: 1;
}
.cat .body .bell::before{
content: '';
position: absolute;
width: 50px;
height: 20px;
top: 18px;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
border-top: 2px solid var(--brown);
}
.cat .body .bell .hole{
position: absolute;
width: 2px;
height: 16px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
background-color: var(--brown);
}
.cat .body .bell .hole::before{
content: '';
position: absolute;
top: 0;
width: 8px;
height: 8px;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
background-color: var(--brown);
}
.cat .body .left-hand{
}
.cat .body .left-hand>div:nth-child(1){
position: absolute;
top: -10px;
right: 48px;
width: 180px;
height: 180px;
border-radius: 50%;
border: 2px solid var(--brown);
clip-path: polygon( 58% 100%, 100% 60%, 100% 100%);
}
.cat .body .left-hand>div:nth-child(2){
position: absolute;
top: 40px;
right: 30px;
width: 160px;
height: 160px;
border-radius: 50%;
border: 2px solid var(--brown);
clip-path: polygon( 38% 100%, 100% 60%, 100% 100%);
}
.cat .body .left-hand>div:nth-child(3){
position: absolute;
top: 150px;
right: 98px;
width: 60px;
height: 60px;
border-radius: 50%;
border: 2px solid var(--brown);
background-color: #fff;
overflow: hidden;
}
.cat .body .left-hand>div:nth-child(3)::before{
content: '';
position: absolute;
top: 7px;
left: -3px;
width: 20px;
height: 20px;
border-bottom: 2px solid var(--brown);
border-radius: 33%;
transform: rotate(-8deg);
}
.cat .body .left-hand>div:nth-child(3)::after{
content: '';
position: absolute;
top: 23px;
width: 20px;
height: 20px;
border-bottom: 2px solid var(--brown);
border-radius: 33%;
transform: rotate(-8deg);
}
.cat .foot1{
position: absolute;
bottom: 62px;
left: 36px;
width: 60px;
height: 40px;
border-radius: 40%;
background-color: rgb(253, 253, 253);
border: 2px solid var(--brown);
transform: rotate(16deg);
z-index: 1;
}
.cat .foot2{
position: absolute;
bottom: 62px;
right: 36px;
width: 60px;
height: 40px;
border-radius: 40%;
background-color: rgb(255, 255, 255);
border: 2px solid var(--brown);
transform: rotate(-16deg);
z-index: 1;
}
.cat .finger-wrap{
position: absolute;
top: 140px;
left: -80px;
background: #fff;
width: 70px;
height: 50px;
border-radius: 33%;
border: 2px solid var(--brown);
transform: rotate(150deg);
z-index: 10;
}
.cat .finger-wrap>div:nth-child(1){
position: absolute;
background: #fff;
height: 40px;
width: 30px;
border-radius: 0 0 50% 50%;
border: 2px solid var(--brown);
border-top: none;
top: 40px;
left: 16px;
}
.cat .finger-wrap>div:nth-child(2){
position: absolute;
background: #fff;
height: 40px;
width: 30px;
border-radius: 0 0 50% 50%;
border: 2px solid var(--brown);
border-top: none;
top: 28px;
left: -17px;
transform: rotate(36deg);
}
.cat .finger-wrap>div:nth-child(3){
position: absolute;
background: #fff;
height: 40px;
width: 30px;
border-radius: 0 0 50% 50%;
border: 2px solid var(--brown);
border-top: none;
top: 29px;
left: 52px;
transform: rotate(-36deg);
}
.cat .right-arm1{
position: absolute;
top: 103px;
left: -52px;
width: 180px;
height: 180px;
border-radius: 50%;
border: 2px solid var(--brown);
clip-path: polygon( 0 0, 0% 100%, 100% 100%);
background-color: #fff;
z-index: 0;
}
.cat .right-arm2{
position: absolute;
top: 59px;
left: -30px;
width: 160px;
height: 160px;
border-radius: 50%;
border: 2px solid var(--brown);
clip-path: polygon( 0 43%, 0% 100%, 100% 100%);
background-color: #ffd2d2;
z-index: 1;
}
</style>
</head>
<body>
<div class="cat">
<div class="ear ear1">
<div></div>
</div>
<div class="ear ear2">
<div></div>
</div>
<div class="head">
<div class="decoration"></div>
<div class="eye eye1">
<div></div>
</div>
<div class="eye eye2">
<div></div>
</div>
<div class="mouth-wrap">
<div class="nose"><div></div></div>
<div class="fossa1"></div>
<div class="fossa2"></div>
<div class="mouth"></div>
</div>
<div class="beard1">
<div></div>
<div></div>
<div></div>
</div>
<div class="beard2">
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="body">
<div class="ribbon"></div>
<div class="bell">
<div class="hole"></div>
</div>
<div class="left-hand">
<div></div>
<div></div>
<div><div></div></div>
</div>
</div>
<div class="right-arm1"></div>
<div class="right-arm2"></div>
<div class="finger-wrap">
<div></div>
<div></div>
<div></div>
</div>
<div class="foot1"></div>
<div class="foot2"></div>
</div>
</body>
</html>
