代碼如下：
<style>
#space {
height: 224px;
width: 223px;
margin-left: 200px;
margin-top: 200px;
}
body:hover .qq {
background-color: #2ec8e9;
}
.qq {
background-color: rgba(0, 134, 202, 1);
}
#head {
width: 128px;
height: 138px;
-webkit-border-radius: 64px;
position: absolute;
margin-top: -214px;
margin-left: 251px;
}
#scarf-left,
#scarf-right {
width: 33px;
height: 65px;
-webkit-border-radius: 16px 8px;
position: absolute;
margin-top: -162px;
margin-left: 260px;
-webkit-transform: rotate(-72deg);
}
#scarf-right {
margin-top: -162px;
margin-left: 338px;
-webkit-transform: rotate(72deg);
}
#swing-left,
#swing-right {
width: 62px;
height: 24px;
-webkit-transform: rotate(-78deg);
-webkit-border-top-left-radius: 28px 14px;
-webkit-border-top-right-radius: 35px 14px;
-webkit-border-bottom-left-radius: 22px 14px;
margin-top: -105px;
margin-left: 210px;
}
#swing-right {
-webkit-transform: rotate(78deg);
-webkit-border-top-left-radius: 35px 14px;
-webkit-border-top-right-radius: 28px 14px;
-webkit-border-bottom-right-radius: 22px 14px;
-webkit-border-bottom-left-radius: 0px 0px;
margin-top: -24px;
margin-left: 356px;
position: absolute;
}
#belly-left,
#belly-right {
width: 28px;
height: 4px;
-webkit-transform: rotate(-122deg);
-webkit-border-top-left-radius: 28px 4px;
-webkit-border-top-right-radius: 28px 4px;
margin-top: 14px;
margin-left: 237px;
}
#belly-right {
margin-top: -4px;
margin-left: 360px;
-webkit-transform: rotate(122deg);
}
#footer-left,
#footer-right {
width: 74px;
height: 38px;
-webkit-border-top-left-radius: 39px 21px;
-webkit-border-bottom-left-radius: 39px 19px;
-webkit-border-bottom-right-radius: 35px 19px;
margin-top: 7px;
margin-left: 240px;
position: absolute;
}
#footer-right {
margin-left: 310px;
-webkit-border-top-right-radius: 39px 21px;
-webkit-border-bottom-right-radius: 39px 19px;
-webkit-border-bottom-left-radius: 35px 19px;
}
#fill-left,
#fill-right {
width: 88px;
height: 88px;
margin-top: -64px;
margin-left: 248px;
position: absolute;
-webkit-transform: rotate(-122deg);
}
#fill-right {
-webkit-transform: rotate(32deg);
margin-top: -65px;
margin-left: 290px;
}
#footer-middle {
width: 20px;
height: 4px;
-webkit-border-radius: 20px 4px;
margin-top: 32px;
margin-left: 302px;
position: absolute;
}
#swing-half-left,
#swing-half-right{
width: 20px;
height: 13px;
-webkit-border-bottom-left-radius: 20px 13px;
-webkit-transform: rotate(-78deg);
margin-top: -15px;
margin-left: 230px;
}
#swing-half-right {
-webkit-transform: rotate(78deg);
-webkit-border-bottom-left-radius: 0px 0px;
-webkit-border-bottom-right-radius: 20px 13px;
margin-left: 375px;
}
#green-outer {
/* border: 120px solid #58B153;*/
width: 240px;
height: 240px;
-webkit-border-bottom-left-radius: 240px 240px;
/* background: -webkit-gradient(linear, 0 0, 100% 100%, from(white), to(#58B153));*/
background-color: rgba(88, 177, 83, 1);
position: absolute;
left: 54px;
top: 128px;
-webkit-transform: rotate(70deg);
}
#green-head {
-webkit-transform: rotate(-205deg);
/* background: -webkit-gradient(linear, 0 0, 0 100%, from(green), to(#60B55B)); */
background-color: #58B153;
border-top-left-radius: 48px 40px;
border-top-right-radius: 48px 40px;
border-bottom-left-radius: 14px 14px;
height: 66px;
left: 112px;
position: absolute;
top: 379px;
width: 89px;
z-index: 2;
}
#green-inner {
width: 300px;
height: 134px;
background-color: white;
-webkit-transform: rotate(-83deg);
-webkit-border-top-left-radius: 164px 68px;
-webkit-border-top-right-radius: 160px 80px;
position: absolute;
top: 176px;
left: 85px;
}
#yellow-outer {
width: 240px;
height: 240px;
background-color: #F3D87D;
-webkit-border-bottom-left-radius: 240px 240px;
position: absolute;
left: 352px;
top: 106px;
-webkit-transform: rotate(192deg);
}
#red-outer {
width: 240px;
height: 240px;
background-color: #EB876F;
-webkit-border-bottom-left-radius: 240px 240px;
position: absolute;
left: 224px;
top: 370px;
-webkit-transform: rotate(310deg);
}
#red-head {
-webkit-transform: rotate(36deg);
background-color: #EB876F;
border-top-left-radius: 48px 40px;
border-top-right-radius: 48px 40px;
height: 66px;
left: 451px;
position: absolute;
top: 390px;
width: 90px;
}
#red-inner {
width: 300px;
height: 134px;
background-color: white;
-webkit-transform: rotate(156deg);
-webkit-border-top-left-radius: 164px 68px;
-webkit-border-top-right-radius: 160px 80px;
position: absolute;
top: 373px;
left: 160px;
}
#yellow-head {
width: 90px;
background-color: #F3D87D;
height: 66px;
-webkit-transform: rotate(-82deg);
-webkit-border-top-left-radius: 48px 40px;
-webkit-border-top-right-radius: 48px 40px;
-webkit-border-bottom-left-radius: 10px 10px;
position: absolute;
top: 90px;
left: 296px;
}
#yellow-inner {
width: 300px;
height: 134px;
background-color: white;
-webkit-transform: rotate(39deg);
-webkit-border-top-left-radius: 164px 68px;
-webkit-border-top-right-radius: 160px 80px;
position: absolute;
top: 214px;
left: 296px;
}
#circle {
width: 482px;
height: 482px;
background-color: white;
-webkit-border-radius: 242px 242px;
margin-top: -278px;
margin-left: 80px;
-webkit-box-shadow: 4px 0px 6px rgba(0, 0, 0, 0.5);
z-index: 4;
}
#circle:hover {
background-color: rgba(255, 255, 255, 0.3);
}
#footer {
font-size: 12px;
background-color: white;
text-align: center;
margin-left: 500px;
float: left;
margin-top: -10px;
}
#footer span:first-child {
color: olive;
}
#text {
/* background: transparent;
font-family: 'segoe ui';
font-size: 60px;
font-weight: bold;
margin-top: -280px;
margin-left: 265px;
z-index: 5;
position: relative;
color: rgba(0, 0, 0, 0.8);
text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.4); */
}
</style>
<div id="head" class="qq"></div>
<div id="scarf-left" class="qq"></div>
<div id="scarf-right" class="qq"></div>
<div id="swing-left" class="qq"></div>
<div id="swing-right" class="qq"></div>
<div id="belly-left" class="qq"></div>
<div id="belly-right" class="qq"></div>
<div id="footer-left" class="qq"></div>
<div id="footer-right" class="qq"></div>
<div id="fill-left" class="qq"></div>
<div id="fill-right" class="qq"></div>
<div id="footer-middle" class="qq"></div>
<div id="swing-half-left" class="qq"></div>
<div id="swing-half-right" class="qq"></div>