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;
	left:149px;
	border-radius:50% 50% 50% 50%/ 0% 0% 100% 100%;
	background-color:#ffb3da;
	z-index:101;
	transform:rotate(13deg);
	/*	width:131px;
	height:55px;
	top:231px;
	left:152px;
	border-radius:50% 50% 50% 50%/ 0% 0% 100% 100%;
	background-color:#ffb3da;
	z-index:101;
	transform:rotate(19deg);
	*/
}
.face {
	width:49px;
	height:59px;
	top:243px;
	left:269px;
	border-radius:50% 50% 50% 50%/ 50% 50% 50% 50%;
	background-color:#ff96ce;
	transform:rotate(26deg);
}
.nose_kong_left {
	width:12px;
	height:12px;
	top:179px;
	left:93px;
	border-radius:50% 50% 50% 50%/ 50% 50% 50% 50%;
	background-color:#da6c9b;
	z-index:104;
}
.nose_kong_right {
	width:12px;
	height:12px;
	top:182px;
	left:109px;
	border-radius:50% 50% 50% 50%/ 50% 50% 50% 50%;
	background-color:#da6c9b;
	z-index:104;
}
.ear_left {
	width:24px;
	height:52px;
	top:126px;
	left:226px;
	border:6px solid #ef96c2;
	border-radius:50% 50% 50% 50%/ 35% 40% 50% 50%;
	background-color:#ffb3da;
	z-index:99;
	transform:rotate(18deg);
}
.ear_right {
	width:24px;
	height:52px;
	top:150px;
	left:280px;
	border:6px solid #ef96c2;
	border-radius:50% 50% 50% 50%/ 35% 40% 50% 50%;
	background-color:#ffb3da;
	z-index:99;
	transform:rotate(36deg);
}
.pig_body_bottom {
	width:215px;
	height:197px;
	top:305px;
	left:108px;
	border:6px solid #e33b32;
	border-radius:50% 50% 50% 50%/ 100% 100% 0% 0%;
	background-color:#eb5b50;
	z-index:99;
}
.hand_left_middle {
	width:78px;
	height:12px;
	top:432px;
	left:63px;
	border-radius:100% 100% 100% 17%/ 100% 90% 16% 90%;
	background-color:#ffbadf;
	z-index:99;
	transform:rotate(-35deg);
}
.hand_left_top {
	width:28px;
	height:9px;
	top:415px;
	left:63px;
	border-radius:100% 100% 100% 35%/ 100% 90% 16% 90%;
	background-color:#ffbadf;
	z-index:99;
}
.hand_left_bottom {
	width:20px;
	height:9px;
	top:420px;
	left:93px;
	border-radius:.........完整代码请登录后点击上方下载按钮下载查看