纯css3 画一个小猪佩奇
<!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; }