Html
    Css
    Js

    
                        
  body {
	margin:0;
}
#view {
	width:500px;
	height:500px;
	margin:0px auto 0px auto;
	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纯手工皮卡丘

更新时间:2021-05-27 09:29:29

小豪出品 只出精品

0