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

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

代码语言：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:.........完整代码请登录后点击上方下载按钮下载查看