css+div实现卡通小猪佩奇猪猪效果代码-html代码-BFW代码库

代码语言：html

代码描述：css+div实现卡通小猪佩奇猪猪效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>

    <style type="text/css">
  
        div {
        position:absolute;
        transform-origin:left top;
}
.pig_container {
        width:800px;
        height:800px;
        top:0;
        left:50px;
}
.pig_head {
        width:300px;
        height:200px;
        top:100px;
        left:100px;
        border-radius:95% 50% 50% 50%/ 87% 80% 68% 50%;
        border:6px solid #ef96c2;
        background-color:#ffb3da;
        transform:rotate(30deg);
        z-index:100;
        box-sizing:border-box;
}
.pig_head_white_left_bottom {
        width:200px;
        height:154px;
        bottom:-7px;
        left:-38px;
        background-color:#fff;
        box-sizing:border-box;
}
.pig_head_white_left_top {
        /*      width:200px;
        height:64px;
        bottom:84px;
        left:52px;
        background-color:#ffb3da;
        box-sizing:border-box;
        */    width:200px;
        height:66px;
        bottom:84px;
        background-color:#ffb3da;
        box-sizing:border-box;
        top:166px;
        left:134px;
        transform:rotate(34deg);
        z-index:103;
}
.left_eye,.right_eye,.face,.mouth {
        z-index:104;
}
.pig_nose {
        width:51px;
        height:70px;
        top:147px;
        left:107px;
        border-radius:72% 72% 72% 72%/ 72% 72% 72% 72%;
        border:6px solid #ef96c2;
        background-color:#ffb3da;
        transform:rotate(36deg);
        z-index:103;
        box-sizing:border-box;
}
.pig_nose_bottom {
        width:88px;
        height:13px;
        top:209px;
        left:84px;
        border-radius:50% 50% 50% 50%/ 0% 0% 100% 100%;
        border:6px solid #ef96c2;
        background-color:#ffb3da;
        transform:rotate(35deg);
        z-index:102;
        box-sizing:border-box;
        border-top-color:#ffb3da;
}
.pig_jaw {
        width:97px;
        height:104px;
        top:249px;
        left:141px;
        border-radius:0% 0% 0% 76%/ 0% 0% 0% 74%;
        border:6px solid #ef96c2;
        background-color:#ffb3da;
        transform:rotate(22deg);
        z-index:100;
        box-sizing:border-box;
        border-top-color:#ffb3da;
        border-right-color:#ffb3da;
}
.pig_jaw_right {
        width:13px;
        height:6px;
        background-color:#ef96c2;
        top:373px;
        left:186px;
        transform:rotate(19deg);
        z-index:100;
}
.left_eye_bg {
        width:29px;
        height:29px;
        top:177px;
        left:170px;
        border-radius:50% 50% 50% 50%/ 50% 50% 50% 50%;
        border:6px solid #fff;
        background-color:#fff;
        z-index:101;
        box-sizing:border-box;
}
.left_eye_ball {
        width:10px;
        height:10px;
        top:181px;
        left:171px;
        border-radius:50% 50% 50% 50%/ 50% 50% 50% 50%;
        border:6px solid #000;
        background-color:#000;
        z-index:101;
        box-sizing:border-box;
}
.left_eye_border {
        width:34px;
        height:34px;
        top:174px;
        left:166px;
        border-radius:50% 50% 50% 50%/ 50% 50% 50% 50%;
        border:6px solid #ef96c2;
        background-color:transparent;
        z-index:101;
        box-sizing:border-box;
}
.right_eye_bg {
        width:28px;
        height:28px;
        top:194px;
        left:205px;
        border-radius:50% 50% 50% 50%/ 50% 50% 50% 50%;
        border:6px solid #fff;
        background-color:#fff;
        z-index:101;
        box-sizing:border-box;
}
.right_eye_ball {
        width:10px;
        height:10px;
        top:199px;
        left:208px;
        border-radius:50% 50% 50% 50%/ 50% 50% 50% 50%;
        border:6px solid #000;
        background-color:#000;
        z-index:101;
        box-sizing:border-box;
}
.right_eye_border {
        width:35px;
        height:37px;
        top:191px;
        left:202px;
        border-radius:50% 50% 50% 50%/ 50% 50% 50% 50%;
        border:6px solid #ef96c2;
        background-color:transparent;
        z-index:101;
        box-sizing:border-box;
}
.mouth_bottom {
        width:97px;
        height:45px;
        top:273px;
        left:154px;
        border-radius:50% 50% 50% 50%/ 0% 0% 100% 100%;
        border:6px solid #d44b81;
        background-color:#000;
        z-index:101;
        box-sizing:border-box;
        transform:rotate(19deg);
}
.mouth_middle {
        width:98px;
        height:27px;
        top:272px;
        left:154px;
        border-radius:0% 0% 50% 50%/ 0% 0% 100% 100%;
        border:6px solid #d44b81;
        background-color:#ffb3da;
        z-index:101;
        box-sizing:border-box;
        transform:rotate(19deg);
        border-top-color:#ffb3da;
}
.mouth_top {
        width:135px;
        height:66px;
        top:231px;
        l.........完整代码请登录后点击上方下载按钮下载查看