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; }