皮卡丘css代码,CSS皮卡丘注释全

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);

}

}