<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>H5 Moving Pikachu Animation</title>
</head>
<body>
<!--ViewBox-->
<div id="view">
<!--Pikachu-->
<div id="pikachu">
<!--tail-->
<div class="tail">
<div class="tail3"></div>
<div class="tail2"></div>
<div class="tail1"></div>
<div class="tail_shading"></div>
</div>
<!--End of tail-->
<!--ears-->
<div class="ear">
<div class="ear_left"></div>
<div class="ear_right"></div>
<div class="ear_shading_left"></div>
<div class="ear_shading_right"></div>
</div>
<!--Ear end-->
<!--legs-->
<div class="leg">
<div class="leg_left"></div>
<div class="leg_right"></div>
</div>
<!--Leg end-->
<!--body-->
<div id="body">
<div class="arm_left"></div>
<div class="arm_right"></div>
</div>
<!--Body end-->
<!--header-->
<div id="head">
<!--face-->
<div class="face_left"></div>
<div class="face_right"></div>
<!--eyes-->
<div class="eye_left">
<!--whites of the eyes-->
<div class="eye_shading_left"></div>
</div>
<div class="eye_right">
<!--whites of the eyes-->
<div class="eye_shading_right"></div>
</div>
<!--Eyes end-->
<!--mouth-->
<div class="mouth_left"></div>
<div class="mouth_right"></div>
<!--tongue-->
<div class="tongue"></div>
<!--nose-->
</div>
<!--End of header-->
</div>
<!--Pikachu ends-->
</div>
<!--View frame end-->
<style type="text/css">
body {
margin: 0;
overflow: hidden;
}
#view {
width: 500px;
height: 500px;
margin: 0px auto 0px auto;
background: ;
position: relative;
}
/*head*/
#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*/
#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;
}
/*left ear*/
.ear_left {
width: 100px;
height: 100px;
background-color: #ffe100;
border-radius: 100px 0px;
border: 4px solid #000;
position: absolute;
left: 300px;
}
/*Right ear*/
.ear_right {
width: 100px;
height: 100px;
background-color: #ffe100;
border-radius: 0px 100px;
border: 4px solid #000;
position: absolute;
left: 100px;
}
/* right ear black shadow */
.ear_shading_right {
width: 38px;
height: 77px;
background-color: #000;
border-radius: 14% 0% 100% 0%;
position: absolute;
left: 370px;
top: 3px;
}
/* Left ear black shadow */
.ear_shading_left {
width: 38px;
height: 77px;
background-color: #000;
border-radius: 0% 14% 0% 100%;
position: absolute;
left: 100px;
top: 3px;
}
/*left cheek*/
.face_left {
width: 45px;
height: 45px;
background-color: #ff2200;
border-radius: 50%;
margin-top: 100px;
float: left;
overflow: hidden;
border: 2px solid #000;
}
/*right cheek*/
.face_right {
width: 45px;
height: 45px;
background-color: #ff2200;
border-radius: 50%;
margin-top: 100px;
float: right;
overflow: hidden;
border: 2px solid #000;
}
/*right eye*/
.eye_right {
width: 30px;
height: 30px;
background-color: #000;
border-radius: 50%;
position: absolute;
left: 20px;
top: 60px;
overflow: hidden;
}
/*white of right eye*/
.eye_shading_right {
width: 15px;
height: 15px;
background-color: #fff;
border-radius: 50%;
position: absolute;
left: 11px;
}
/*left eye*/
.eye_left {
width: 30px;
height: 30px;
background-color: #000;
border-radius: 50%;
position: absolute;
left: 110px;
top: 60px;
overflow: hidden;
}
/*left eye white*/
.eye_shading_left {
width: 15px;
height: 15px;
background-color: #fff;
border-radius: 50%;
position: absolute;
left: 5px;
}
/*nose*/
.nose {
width: 15px;
height: 10px;
background-color: #000;
border-radius: 50%;
left: 73px;
top: 88px;
position: absolute;
overflow: hidden;
}
/*Right of mouth*/
.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 */
.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*/
.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;
}
/*left arm*/
.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);
}
/*right arm*/
.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);
}
/*left leg*/
.leg_left {
position: absolute;
width: 47px;
height: 19px;
border: 4px solid #000;
background: #ffe100;
border-radius: 80% 20% 80% 10%;
top: 356px;
left: 164px;
}
/*right leg*/
.leg_right {
position: absolute;
width: 47px;
height: 19px;
border: 4px solid #000;
background: #ffe100;
border-radius: 20% 80% 10% 80%;
top: 356px;
left: 293px;
}
/* on the tail */
.tail1 {
width: 127px;
height: 70px;
-webkit-transform: skew(-20deg);
transform: skew(-20deg);
background: #ffe100;
border: 4px solid #000;
position: absolute;
top: 100px;
left: -8px;
}
/* in the tail */
.tail2 {
width: 66px;
height: 149px;
-webkit-transform: skew(-20deg);
transform: skew(-20deg);
background: #ffe100;
border: 4px solid #000;
position: absolute;
top: 134px;
left: 96px;
}
/*under the tail*/
.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 shadow*/
.tail_shading {
width: 29px;
height: 183px;
-webkit-transform: skew(16deg);
transform: skew(16deg);
background: #ffe100;
position: absolute;
top: 113px;
left: 118px;
}
/* tail wagging */
.tail {
-webkit-animation: tail 0.2s ease-in-out infinite;
animation: tail 0.2s ease-in-out infinite;
}
/* tongue out */
@-webkit-keyframes tongue {
0% {
height: 3px;
}
30% {
width: 20px;
height: 36px;
}
100% {
height: 3px;
}
}
/* tongue out */
@keyframes tongue {
0% {
height: 3px;
}
30% {
width: 20px;
height: 36px;
}
100% {
height: 3px;
}
}
/* tail wagging animation */
@-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);
}
}
/* tail wagging animation */
@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);
}
}
</style>
</body>
</html>
Effect picture: