![]()
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="refresh" content="2">
<title>小猪佩奇</title>
<link href="css/peiqi.css" rel="stylesheet">
</head>
<body>
<div id='peiqi' align="center">
<div class='peiqi-head'>
<div class="peiqi-head-bk"></div>
<div class="peiqi-head-bk2"></div>
<div class="peiqi-head-bk3"></div>
<div class="peiqi-head-bk4"></div>
<div class="peiqi-head-ears">
<div class="peiqi-head-ears-left"></div>
<div class="peiqi-head-ears-right"></div>
</div>
<div class="peiqi-head-eye">
<div class="peiqi-head-eye-left">
<div class="peiqi-head-eye-left-yanzhu"></div>
</div>
<div class="peiqi-head-eye-right">
<div class="peiqi-head-eye-left-yanzhu"></div>
</div>
</div>
<div class="peiqi-head-saihong"></div>
<div class="peiqi-head-mouth"></div>
<div class="peiqi-head-nose">
<div class="peiqi-head-nose-bikong-left"></div>
<div class="peiqi-head-nose-bikong-right"></div>
</div>
</div>
<div class="peiqi-body">
<div class="peiqi-body-skirt"></div>
<div class="peiqi-body-skirt2"></div>
<div class="peiqi-body-hands-left">
<div class="peiqi-body-hands-left-zhitou"></div>
<div class="peiqi-body-hands-left-zhitou1"></div>
<div class="peiqi-body-hands-left-zhitou2"></div>
</div>
<div class="peiqi-body-hands-right">
<div class="peiqi-body-hands-right-zhitou"></div>
<div class="peiqi-body-hands-right-zhitou1"></div>
<div class="peiqi-body-hands-right-zhitou2"></div>
</div>
</div>
<div class="peiqi-foot-left">
<div class="peiqi-foot-xiezi"></div>
</div>
<div class="peiqi-foot-right">
<div class="peiqi-foot-xiezi"></div>
</div>
<div class="peiqi-yinying"></div>
<div class="peiqi-weiba">
<div class="peiqi-weiba1"></div>
<div class="peiqi-weiba2"></div>
</div>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
#peiqi{
width:290px;
height: 380px;
position: relative;
}
#peiqi img{
width:290px;
height: 600px;
display: none;
}
.peiqi-head-bk{
width: 180px;
height: 137px;
border: 4px solid #e98bc0;
position: absolute;
top: 60px;
left: 50px;
transform: rotate(-40deg);
border-radius: 41% 63% 0% 49%/58% 51% 8% 45%;
z-index: 1;
background-color: #ffaedf;
}
.peiqi-head-bk2{
width: 80px;
height: 51px;
border: 4px solid #e98bc0;
transform: rotate(-49deg);
border-radius: 0% 36% 60% 116%/0% 92% 94% 59%;
border-left: none;
border-top: none;
position: absolute;
top: 71px;
left: 142px;
background-color: #ffaedf;
z-index: 3;
}
.peiqi-head-bk3{
width: 80px;
height: 50px;
border: 4px solid #e98bc0;
transform: rotate(-96deg);
border-radius: 0% 0% 27% 93%/0% 0% 9% 115%;
border-top: none;
border-right: none;
position: absolute;
top: 145px;
left: 116px;
background-color: #ffaedf;
z-index: 3;
}
.peiqi-head-bk4{
width: 159px;
height: 93px;
transform: rotate(-65deg);
position: absolute;
top: 103px;
left: 134px;
background-color: #FFFFFF;
z-index: 2;
}
.peiqi-head-ears-left{
width: 20px;
height: 40px;
border: 4px solid #e98bc0;
border-radius: 50%/50%;
position: absolute;
left: 67px;
top: 48px;
border-radius: 46% 53% 32% 42%/42% 60% 41% 48%;
transform: rotate(-20deg);
background-color: #ffaedf;
}
.peiqi-head-ears-right{
width: 20px;
height: 40px;
border: 4px solid #e98bc0;
border-radius: 50%/50%;
position: absolute;
left: 102px;
top: 29px;
border-radius: 53%/52%;
transform: rotate(-15deg);
background-color: #ffaedf;
}
.peiqi-head-eye-left{
width: 17px;
height: 21px;
border: 5px solid #e98bc0;
position: absolute;
left: 107px;
top: 77px;
z-index: 3;
transform: rotate(8deg);
background-color: #fff;
border-radius: 50%/50%;
}
.peiqi-head-eye-left-yanzhu{
width: 9px;
height: 9px;
border-radius: 50%;
background-color: #000000;
position: absolute;
top: 7px;
left: 2px;
}
.peiqi-head-eye-right{
width: 17px;
height: 21px;
border: 5px solid #e98bc0;
position: absolute;
left: 137px;
top: 65px;
z-index: 3;
transform: rotate(8deg);
background-color: #fff;
border-radius: 50%/50%;
}
.peiqi-head-saihong{
width: 29px;
height: 35px;
background-color: #ff8bd2;
position: absolute;
top: 129px;
left: 78px;
border-radius: 50% 60%/52%;
transform: rotate(-11deg);
z-index: 3;
}
.peiqi-head-mouth{
width: 45px;
height: 22px;
border: 5px solid #d84593;
border-radius: 10% 10% 50% 50% /10% 20% 69% 74%;
position: absolute;
top: 150px;
left: 117px;
transform: rotate(-15deg);
z-index: 3;
box-shadow:0 0 0 15px rgba(216,69,147,.7) inset;
}
.peiqi-head-nose{
width: 30px;
height: 45px;
transform: rotate(-30deg);
border: 4px solid #e98bc0;
z-index: 3;
position: absolute;
left: 178px;
top: 56px;
border-radius: 50%/50%;
}
.peiqi-head-nose-bikong-left{
width: 8px;
transform: rotate(35deg);
height: 10px;
background-color: #d664a9;
position:absolute;
top: 15px;
left: 6px;
border-radius: 50%/50%;
}
.peiqi-head-nose-bikong-right{
width: 8px;
transform: rotate(35deg);
height: 10px;
background-color: #d664a9;
position:absolute;
top: 20px;
left: 20px;
border-radius: 50%/50%;
}
.peiqi-body-skirt{
width: 143px;
height: 152px;
position: absolute;
top: 150px;
left: 46px;
border: 4px solid #e1333d;
background-color: #eb555e;
border-radius: 53% 47% 0% 0% / 100% 100% 0% 0%;
}
.peiqi-body-skirt2{
width: 32px;
height: 50px;
position: absolute;
top: 180px;
left: 145px;
transform: rotate(-15deg);
border: 4px solid #e1333d;
z-index: 2;
border-radius: 46% 46% 0% 0% / 92% 92% 0% 0%;
border-left: none;
border-bottom: none;
background-color: #eb555e;
}
.peiqi-body-hands-left{
width: 58px;
height: 8px;
transform: rotate(-23deg);
position: absolute;
top: 219px;
left: 10px;
z-index: 0;
background-color: #fab8e1;
border-radius: 30%/35%;
}
.peiqi-body-hands-left-zhitou{
width: 19px;
height: 7px;
transform: rotate(-15deg);
position: absolute;
left: -10px;
top: 2px;
background-color: #fab8e1;
border-radius: 28px 30px 15px 33px;
}
.peiqi-body-hands-left-zhitou1{
width: 21px;
height: 7px;
transform: rotate(33deg);
position: absolute;
left: -6px;
top: -6px;
background-color: #fab8e1;
border-radius: 28px 0px 0px 33px;
}
.peiqi-body-hands-left-zhitou2{
width: 14px;
height: 7px;
transform: rotate(-56deg);
position: absolute;
left: 0px;
top: 7px;
background-color: #fab8e1;
border-radius: 28px 0px 0px 33px;
}
.peiqi-body-hands-right{
width: 58px;
height: 8px;
transform: rotate(-149deg);
position: absolute;
top: 222px;
left: 176px;
z-index: 2;
background-color: #fab8e1;
border-radius: 30%/35%;
}
.peiqi-body-hands-right-zhitou{
width: 19px;
height: 7px;
transform: rotate(13deg);
position: absolute;
left: -10px;
top: -1px;
background-color: #fab8e1;
border-radius: 28px 30px 15px 33px;
}
.peiqi-body-hands-right-zhitou1{
width: 21px;
height: 7px;
transform: rotate(54deg);
position: absolute;
left: -4px;
top: -6px;
background-color: #fab8e1;
border-radius: 28px 0px 0px 33px;
}
.peiqi-body-hands-right-zhitou2{
width: 14px;
height: 7px;
transform: rotate(-56deg);
position: absolute;
left: 0px;
top: 7px;
background-color: #fab8e1;
border-radius: 28px 0px 0px 33px;
}
.peiqi-foot-left{
width: 8px;
height: 30px;
background-color: #fab8e1;
position: absolute;
bottom: 40px;
left: 80px;
z-index: 3;
}
.peiqi-foot-right{
width: 8px;
height: 30px;
background-color: #fab8e1;
position: absolute;
bottom: 40px;
left: 150px;
z-index: 3;
}
.peiqi-foot-xiezi{
width: 40px;
height: 13px;
background-color: #000000;
position: absolute;
top: 25px;
left: -1px;
border-radius: 80% 33% 31% 53% / 57% 44% 58% 46%;
z-index: 3;
}
.peiqi-yinying{
width: 173px;
height: 34px;
background-color: rgba(0,0,0,0.3);
position: absolute;
bottom: 21px;
left: 44px;
border-radius: 50%/50%;
}
.peiqi-weiba{
width: 15px;
height: 20px;
border: 6px solid #fab8e1;
box-sizing: border-box;
border-radius: 50%/50%;
position: absolute;
left: 27px;
bottom: 90px;
z-index: -1;
}
.peiqi-weiba1{
width: 10px;
height: 20px;
border: 6px solid #fab8e1;
position: absolute;
top: -7px;
left: 0px;
transform: rotate(73deg);
border-radius: 0% 0% 41% 10% / 0% 0% 44% 10%;
border-top: none;
border-left: none;
z-index: -1;
}
.peiqi-weiba2{
width: 10px;
height: 14px;
border: 6px solid #fab8e1;
position: absolute;
top: -3px;
left: -12px;
transform: rotate(77deg);
border-radius: 0% 0% 57% 10% / 0% 0% 44% 10%;
border-top: none;
border-left: none;
z-index: -1;
}
浙公网安备 33010602011771号