1.html部分
<div class="ear-left"></div>
<div class="ear-right"></div>
<div class="eye-left"></div>
<div class="eye-right"></div>
<div class="face circle-blue"></div>
<div class="face circle-red"></div>
<div class="face circle-purple"></div>
<div class="face circle-yellow"></div>
<div class="face circle-green"></div>
<div class="nose"></div>
<div class="mouse"></div>
<div class="hand-left"></div>
<div class="hand-right"></div>
<div class="foot-left"></div>
<div class="foot-right"></div>
** 2.css部分**
*{
margin: 0;
padding: 0;
}
body {
color: #000;
}
.bing-dun-dun-box{
position: absolute;
left: calc((100vw - 510px) / 2 - 45px);
top: calc((100vh - 480px) / 2 - 15px) ;
}
.bing-dun-dun-body {
width: 362px;
height: 410px;
border: #393939 8px solid;
margin: 50px auto;
border-radius: 88% 88% 62% 68% / 82% 82% 95% 84%;
position: absolute;
left: 109px;
top: -30px;
background: #fff;
}
.ear-left,.ear-right {
background: #393939;
width: 81px;
height: 115px;
border-radius: 50%;
position: absolute;
z-index: -1;
}
.ear-left {
left: 150px;
top: 26px;
transform: rotate(-10deg);
}
.ear-right{
left: 362px;
top: 28px;
transform: rotate(10deg);
}
.eye-left,.eye-right {
background: #393939;
width: 83px;
height: 115px;
border-radius: 50%;
position: absolute;
}
.eye-left {
left: 180px;
top: 122px;
transform: rotate(45deg);
}
.eye-right{
left: 329px;
top: 122px;
transform: rotate(-45deg);
}
.eye-left::before,.eye-right::before {
content: '';
width: 40px;
height: 40px;
border: #fff 5px solid;
border-radius: 100%;
position: absolute;
}
.eye-left::before {
right: 10px;
top: 22px;
}
.eye-right::before {
left: 10px;
top: 22px;
}
.eye-left::after,.eye-right::after {
content: '';
width: 10px;
height: 10px;
background: #9b9b9b;
border-radius: 100%;
position: absolute;
}
.eye-left::after {
right: 27px;
top: 31px;
}
.eye-right::after {
left: 41px;
top: 44px;
}
.face {
position: absolute;
border-radius: 48% 48% 44% 49% / 53% 54% 45% 47%;
}
.circle-blue {
border: #6bcdf3 5px solid;
width: 280px;
height: 224px;
left: 150px;
top: 78px;
}
.circle-red {
border: #af2350 5px solid;
width: 287px;
height: 233px;
left: 146px;
top: 73px;
}
.circle-yellow {
border: #ffc346 5px solid;
width: 305px;
height: 248px;
left: 137px;
top: 65px;
}
.circle-green {
border: #7fcb58 5px solid;
width: 313px;
height: 256px;
left: 133px;
top: 61px;
}
.hand-left,.hand-right {
background: #333;
position: absolute;
z-index: -1;
}
.hand-left {
width: 75px;
height: 118px;
left: 64px;
top: 244px;
transform: rotate(45deg);
border-radius: 24% 69% 68% 76% / 53% 95% 40% 52%;
}
.hand-right {
width: 75px;
height: 148px;
left: 463px;
top: 162px;
transform: rotate(37deg);
border-radius: 45% 62% 98% 6% / 40% 46% 80% 58%;
}
.hand-right::before {
content: '';
width: 16px;
height: 24px;
background: #bc242c;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
transform: rotate(45deg);
left: 32px;
top: 20px;
position: absolute;
}
.hand-right::after {
content: '';
width: 16px;
height: 24px;
background: #bc242c;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
transform: rotate(-45deg);
left: 26px;
top: 20px;
position: absolute;
}
.nose {
background-color: #333;
}
.nose::before, .nose::after {
content: '';
position: absolute;
background-color: inherit;
}
.nose ,.nose::before, .nose::after {
width: 28px;
height: 18px;
border-radius: 42px 42px 60px 61px / 30px 30px 50px 46px;
}
.nose {
position: absolute;
left: 284px;
top: 187px;
}
.mouse {
position: absolute;
left: 265px;
top: 208px;
width: 68px;
height: 25px;
border-radius: 45%;
border: #393939 7px solid;
border-top: none;
border-left: 0;
border-right: 0;
}
.foot-left,.foot-right {
background: #333;
position: absolute;
width: 83px;
height: 80px;
border-radius: 0 0 30px 30px;
z-index: -1;
}
.foot-left {
left: 187px;
top: 423px;
}
.foot-right {
left: 328px;
top: 423px;
}
.foot-left::after,.foot-right::after {
content: '';
width: 43px;
height: 30px;
position: absolute;
background: #363636;
border-radius: 30px;
}
.foot-left::after {
bottom: 0;
right: -3px;
}
.foot-right::after {
bottom: 0;
left: -3px;
}
3.效果图
