Html
    Css
    Js

    
                        
body {
	margin:0;
}
#view {
	width:500px;
	height:500px;
	margin:0px auto 0px auto;
	background:;
	position:relative;
}
/*头*/
#head {
	width:160px;
	height:175px;
	margin:auto;
	background:#ffe100;
	position:absolute;
	top:10%;
	left:35%;
	border-top-left-radius:45% 43%;
	border-top-right-radius:45% 43%;
	border-bottom-left-radius:50% 35%;
	border-bottom-right-radius:50% 35%;
	border:4px solid #000;
	border-bottom-color:#ffe100;
}
/*身体*/
#body {
	width:170px;
	height:185px;
	background:#ffe100;
	position:absolute;
	top:38%;
	left:34%;
	border-bottom-left-radius:45% 43%;
	border-bottom-right-radius:45% 43%;
	border-top-left-radius:30% 90%;
	border-top-right-radius:30% 90%;
	border:4px solid #000;
}
/*左耳朵*/
.ear_left {
	width:100px;
	height:100px;
	background-color:#ffe100;
	border-radius:100px 0px;
	border:4px solid #000;
	position:absolute;
	left:300px;
}
/*右耳朵*/
.ear_right {
	width:100px;
	height:100px;
	background-color:#ffe100;
	border-radius:0px 100px;
	border:4px solid #000;
	position:absolute;
	left:100px;
}
/*右耳朵黑色阴影*/
.ear_shading_right {
	width:38px;
	height:77px;
	background-color:#000;
	border-radius:14% 0% 100% 0%;
	position:absolute;
	left:370px;
	top:3px;
}
/*左耳朵黑色阴影*/
.ear_shading_left {
	width:38px;
	height:77px;
	background-color:#000;
	border-radius:0% 14% 0% 100%;
	position:absolute;
	left:100px;
	top:3px;
}
/*左脸蛋*/
.face_left {
	width:45px;
	height:45px;
	background-color:#ff2200;
	border-radius:50%;
	margin-top:100px;
	float:left;
	overflow:hidden;
	border:2px solid #000;
}
/*右脸蛋*/
.face_right {
	width:45px;
	height:45px;
	background-color:#ff2200;
	border-radius:50%;
	margin-top:100px;
	float:right;
	overflow:hidden;
	border:2px solid #000;
}
/*右眼睛*/
.eye_right {
	width:30px;
	height:30px;
	background-color:#000;
	border-radius:50%;
	position:absolute;
	left:20px;
	top:60px;
	overflow:hidden;
}
/*右眼白*/
.eye_shading_right {
	width:15px;
	height:15px;
	background-color:#fff;
	border-radius:50%;
	position:absolute;
	left:11px;
}
/*左眼睛*/
.eye_left {
	width:30px;
	height:30px;
	background-color:#000;
	border-radius:50%;
	position:absolute;
	left:110px;
	top:60px;
	overflow:hidden;
}
/*左眼白*/
.eye_shading_left {
	width:15px;
	height:15px;
	background-color:#fff;
	border-radius:50%;
	position:absolute;
	left:5px;
}
/*鼻子*/
.nose {
	width:15px;
	height:10px;
	background-color:#000;
	border-radius:50%;
	left:73px;
	top:88px;
	position:absolute;
	overflow:hidden;
}
/*嘴巴右*/
.mouth_right {
	width:35px;
	height:30px;
	background:#ffe100;
	position:absolute;
	top:67px;
	left:72px;
	border-radius:50%;
	border:3px solid #ffe100;
	border-bottom-color:#000;
}
/*嘴巴左*/
.mouth_left {
	width:35px;
	height:30px;
	background:#ffe100;
	position:absolute;
	top:67px;
	left:47px;
	border-radius:50%;
	border:3px solid #ffe100;
	border-bottom-color:#000;
}
/*舌头*/
.tongue {
	width:23px;
	height:3px;
	background:#ff2200;
	position:absolute;
	top:102px;
	left:66px;
	border-bottom-left-radius:40% 90%;
	border-bottom-right-radius:40% 90%;
	border:3px solid #000;
	border-top-color:#ffe100;
	-webkit-animation:tongue 1s ease-in-out infinite;
	animation:tongue 1s ease-in-out infinite;
}
/*左胳膊*/
.arm_left {
	width:50px;
	height:65px;
	background:#ffe100;
	position:absolute;
	top:50px;
	left:20px;
	border-bottom-left-radius:40% 90%;
	border-bottom-right-radius:40% 90%;
	border:4px solid #000;
	border-top-color:#ffe100;
	-webkit-transform:skew(16deg);
	transform:skew(16deg);
}
/*右胳膊*/
.arm_right {
	width:50px;
	height:65px;
	background:#ffe100;
	position:absolute;
	top:50px;
	left:95px;
	border-bottom-left-radius:40% 90%;
	border-bottom-right-radius:40% 90%;
	border:4px solid #000;
	border-top-color:#ffe100;
	-webkit-transform:skew(-16deg);
	transform:skew(-16deg);
}
/*左腿*/
.leg_left {
	position:absolute;
	width:47px;
	height:19px;
	border:4px solid #000;
	background:#ffe100;
	border-radius:80% 20% 80% 10%;
	top:356px;
	left:164px;
}
/*右腿*/
.leg_right {
	position:absolute;
	width:47px;
	height:19px;
	border:4px solid #000;
	background:#ffe100;
	border-radius:20% 80% 10% 80%;
	top:356px;
	left:293px;
}
/*尾巴上*/
.tail1 {
	width:127px;
	height:70px;
	-webkit-transform:skew(-20deg);
	transform:skew(-20deg);
	background:#ffe100;
	border:4px solid #000;
	position:absolute;
	top:100px;
	left:-8px;
}
/*尾巴中*/
.tail2 {
	width:66px;
	height:149px;
	-webkit-transform:skew(-20deg);
	transform:skew(-20deg);
	background:#ffe100;
	border:4px solid #000;
	position:absolute;
	top:134px;
	left:96px;
}
/*尾巴下*/
.tail3 {
	width:42px;
	height:87px;
	-webkit-transform:skew(-20deg);
	transform:skew(-20deg);
	background:#ffe100;
	border:4px solid #000;
	position:absolute;
	top:235px;
	left:140px;
}
/*尾巴阴影*/
.tail_shading {
	width:29px;
	height:183px;
	-webkit-transform:skew(16deg);
	transform:skew(16deg);
	background:#ffe100;
	position:absolute;
	top:113px;
	left:118px;
}
/*尾巴摇摆*/
.tail {
	-webkit-animation:tail 0.2s ease-in-out infinite;
	animation:tail 0.2s ease-in-out infinite;
}
/*吐舌头*/
@-webkit-keyframes tongue {
	0% {
	height:3px;
}
30% {
	width:20px;
	height:36px;
}
100% {
	height:3px;
}
}/*吐舌头*/
@keyframes tongue {
	0% {
	height:3px;
}
30% {
	width:20px;
	height:36px;
}
100% {
	height:3px;
}
}/*尾巴摇摆动画*/
@-webkit-keyframes tail {
	0% {
	-webkit-transform-origin:250px 300px;
	-webkit-transform:rotateZ(0deg);
}
60% {
	-webkit-transform-origin:250px 300px;
	-webkit-transform:rotateZ(10deg);
}
100% {
	-webkit-transform-origin:250px 300px;
	-webkit-transform:rotateZ(0deg);
}
}/*尾巴摇摆动画*/
@keyframes tail {
	0% {
	transform-origin:250px 300px;
	transform:rotateZ(0deg);
}
60% {
	transform-origin:250px 300px;
	transform:rotateZ(10deg);
}
100% {
	transform-origin:250px 300px;
	transform:rotateZ(0deg);
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

CSS皮卡丘注释全

使用css实现的皮卡丘

1
      无敌小提莫0
      2017/3/27 16:34:52

      厉害了,膜拜学习

      回复