zoukankan html css js c++ java

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

查看全文

相关阅读:
虚拟机中无法显示摄像头驱动问题
 格式化的打印输出
 adb 常用命令
 stl list 正确删除节点程序实例
 程序猿的终点？！！！
奇迹是否会发生？乙肝从大三阳到小三阳到自愈！
2014年誓言：干掉网页设计程序——Dreamweaver！
Dreamweaver杀手！Illustrator终结者？Flash的末日？图形图像设计程序之网页版
 网页程序 vs 桌面程序
 x13 vs md5

原文地址：https://www.cnblogs.com/foreverCg/p/10107237.html