Pure CSS3 Draw small yellow people and achieve animation effect

Preface
Two days ago I just released a CSS3 to realize the small yellow People animation blog, but the implementation of the CSS3 animation is based on my station cool web found a small yellow people jpg format picture, and I use PS key out the part that needs to realize the animation, finally finished the animation effect. However, in fact, my original intention is to experience the use of pictures to do animation bright, but can not find material, only helpless with the most stupid way to meet their needs, this would like to barely see on the line. However, still can not resist his inner perfect, so, with a night with CSS3 painted a small yellow people to achieve similar animation effect.

Body
OK, let's see how the following two pictures are different:

Of course, many people will say that the obvious size is different, the mouth, the hair is not the same. But in fact the biggest difference is, with an image of the example is: This is two children, the first one is from the supermarket shelves, and the other one is my own life. How is it born? --With css3!

Then born to move Ah, otherwise it will die, so, I took more than a few, it became this way:

What do you think? Although the hands and feet animation is still not very likeness, but human brains can still see what the meaning of it! Today let's learn how to give birth to a small yellow man.

First, the HTML structure is directly put out for everyone to look at:

<p class= "wrapper" ><!--container--<p class= "Littleh" ><!--yellow to <p class= "body H "><!--body--<p class=" trousers "><!--pants--<p class=" Condole Belt "><!--Straps--<p class=" left "></p> <p class=" rig HT ></p> </p> <p class= "trousers_top" ></p><!--trousers with a prominent rectangle                    Part--<p class= "pocket" ></p><!--Pockets--<!--three lines-- <span class= "Line_left" ></span> <span class= "Line_right" ></span&gt                    ; <span class= "Line_bottom" ></span> </p> </p> <p class= "Hair "><!--Hair--<span class=" Left_hair_one "></span> <span class=" Left_ HaiR_two "></span> </p> <p class=" Eyes "><!--eyes--<p Clas s= "Lefteye" ><!--left eye--<p class= "Left_blackeye" > <p class= "le Ft_white "></p> </p> </p> <p class=" Righteye ">& lt;! --Right eye--<p class= "Right_blackeye" > <p class= "right_white" ></ p> </p> </p> </p> <p class= "Mouse" >< !--mouth-to-<p class= "Mouse_shape" ></p> </p> <p class= "Hands" & gt;<!--Hands--<p class= "LeftHand" ></p> <p class= "righthand" ></p&            Gt             </p> <p class= "feet" ><!--feet--<p class= "Left_foot" ></p>   <p class= "Right_foot" ></p> </p> <p class= "Groundshadow" ></p><!-- Foot Shadow-</p> </p>

Well, every place I have marked the use of it, you can understand a little bit, in the mind there is a approximate model or hierarchy structure.

The next is the material ... I will explain in step-by-step, one-step implementation:

First, make some simple styling for the container and the whole:

body{    margin:0;    padding:0;}. wrapper{    width:300px;    margin:100px Auto;}. litteh{    position:relative;}. bodyh{    Position:absolute;    width:240px;    height:400px;    border:5px solid #000;    border-radius:115px;    Background:rgb (249,217,70);    Overflow:hidden;    Z-index:2;}

Among them. Bodyh is mainly to draw the body of small yellow people, the proportion of the body is very important, now run to look at the effect:

OK, the body already has, now hurriedly give it to wear a pair of trousers!

. bodyh. condolebelt{    Position:absolute;}. Bodyh. trousers{    Position:absolute;    bottom:0;    width:100%;    height:100px;    BORDER-TOP:6PX solid #000;    Background:rgb (32,116,160);}. trousers_top{    width:160px;    height:60px;    BORDER:6PX solid #000;    Border-bottom:none;    border-radius:0 0 5px 5px;    Background:rgb (32,116,160);    Position:absolute;    bottom:100px;    left:34px;}

where the. Trousers_top is the rectangular part, so what is it like to wear pants?

Now how to look like a capsule, no, hurriedly modify the decoration, give it a sling, or the trousers will fall:

. bodyh. Condolebelt. Left,.bodyh. Condolebelt. right{    width:100px;    height:16px;    border:5px solid #000;    Background:rgb (32,116,160);    Position:absolute;    top:-90px;    left:-35px;    Z-index:2;    -webkit-transform:rotate (45deg);}. Bodyh. Condolebelt. left{    top:-88px;    left:165px;    -webkit-transform:rotate ( -45deg);}. Bodyh. Condolebelt. Left:after,.bodyh condolebelt. right:after{    content: ';    width:8px;    height:8px;    border-radius:50%;    Background: #000;    Position:absolute;    top:4px;    left:88px;}. Bodyh. Condolebelt. left:after{    left:5px;}

This piece is basically to achieve two suspenders, left and right, then I use: after pseudo elements to achieve the small black spots on the sling:

Well, the beginning of the model has a kind of, then we bang the trouser pocket and the side of the decoration to achieve:

. pocket{    width:60px;    height:45px;    BORDER:6PX solid #000;    border-radius:0px 0px 25px 25px;    Position:absolute;    bottom:65px;    left:84px;}. line_right{    width:30px;    height:30px;    border-bottom-left-radius:100px;    BORDER-BOTTOM:6PX solid #000;    BORDER-LEFT:6PX solid #000;    Position:absolute;    left:0;    bottom:60px;    -webkit-transform:rotate ( -75deg);}. line_left{    width:30px;    height:30px;    border-bottom-right-radius:100px;    BORDER-BOTTOM:6PX solid #000;    BORDER-RIGHT:6PX solid #000;    Position:absolute;    right:0;    bottom:63px;    -webkit-transform:rotate (75deg);}. line_bottom{    height:40px;    border:3px solid #000;    border-radius:3px;    Position:absolute;    left:118px;    bottom:0px;}

Look first:

OK, two points of note:

1. I put my trousers in the body, and then give. BODYH add Overflow:hidden, so that we do not have to worry about overflow how to do, and very easy to achieve the effect of trousers;

2. You can see that there are two curved sections on both sides of the trousers, I am by giving a corner of the rectangle to achieve the fillet effect, and then only set the border style with the two edges adjacent to the corner, and then rotate the angle to achieve this effect, of course, can only achieve a simple effect.

OK, let's go ahead and implement the following eye parts:

. eyes{position:relative; Z-index:3;}.    Eyes. Lefteye,.eyes. righteye{width:85px;    height:85px;    border-radius:50%;    BORDER:6PX solid #000;    Background: #fff;    Position:absolute;    top:60px; left:27px;}. Eyes. lefteye{left:124px;}.    Eyes. Lefteye. Left_blackeye,.eyes righteye. right_blackeye{width:40px;    height:40px;    border-radius:50%;    Background: #000;    Position:absolute;    top:24px; left:22px;}.    Eyes. Lefteye Left_blackeye. Righteye. Right_blackeye. right_white{width:20px;    height:20px;    border-radius:50%;    Background: #fff;    Position:absolute;    top:7px; left:17px;}.    Eyes. Lefteye. Left_blackeye. left_white{top:4px; left:17px;}.    Eyes. Lefteye:after,.eyes. righteye:after{content: ";    width:28px;    height:18px;    Background: #000;    Position:absolute;    left:-30px;    top:37px; -WEBKIT-TRANSFORM:SKEWX (20deg) rotate (7deg);}.    Eyes. lefteye:after{left:89px;   top:37px; -WEBKIT-TRANSFORM:SKEWX ( -20deg) rotate ( -7deg);} 

The eye part is quite good realizes, first draws the glasses, then black eyes, then draws the white point, finally I only then draws the eye frame, the eye frame I use: after pseudo element realization. As follows:

The mouth is the most confused me, but still can finally achieve:

. mouse{    position:relative;}. Mouse. mouse_shape{    width:55px;    height:35px;    border:5px solid #000;    border-bottom-left-radius:30px;    Background: #fff;    Position:absolute;    top:175px;    left:98px;    Z-index:3;    -webkit-transform:rotate ( -35deg);}

The first is to simulate the shape of the mouth by a corner of the rectangle, and then rotate it:

As a result, if we want to achieve the desired effect, we need to cover up the upper part, so I use the following pseudo-element to achieve the matte effect:

. Mouse. mouse_shape:after{    content: ';    width:70px;    height:32px;    border-bottom:5px solid #000;    border-radius:35px 26px 5px 5px;    background:red;    Position:absolute;    top:-16px;    left:3px;    -webkit-transform:rotate (34deg);}

This place needs to be slowly transferred to the appropriate location, the simulation diagram is as follows:

The red part is the mask, is also a rectangle, set the bottom border, and the bottom part of the mouth to form a closed effect, now we can change the color to skin tone on the line:

. Mouse. mouse_shape:after{    content: ';    width:70px;    height:32px;    border-bottom:5px solid #000;    border-radius:35px 26px 5px 5px;    Background:rgb (249,217,70);    Position:absolute;    top:-16px;    left:3px;    -webkit-transform:rotate (34deg);    -webkit-animation:mouse_mask 5s ease-in-out Infinite;}

As follows:

The next hand part, this part is not difficult, that is, two rounded rectangles, rotated the angle, and then the level lower than the body level on the line, and then through: after the pseudo-element to achieve the arm of the joint is done.

. hands{    position:relative;}. Hands. Lefthand,.hands. righthand{    width:80px;    height:80px;    BORDER:6PX solid #000;    border-radius:25px;    Background:rgb (249,217,70);    Position:absolute;    top:220px;    left:-23px;    -webkit-transform:rotate (40deg);}. Hands. lefthand{    left:182px;    top:220px;    -webkit-transform:rotate ( -40deg);}. Hands. Lefthand:after,.hands. righthand:after{    content: ";    width:6px;    border:3px solid #000;    border-radius:3px;    Position:absolute;    left:13px;    top:50px;    -webkit-transform:rotate (90deg);}. Hands. lefthand:after{    left:53px;    top:50px;    -webkit-transform:rotate ( -90deg);}

As follows:

Then next is the feet of the part, mainly is the design of the upper, I am through a rectangle, and then set different fillet values, plus a little bit of rotation to simulate, this piece of words, how to do I do not feel like, so the last almost I compromise.

. feet{    position:relative;}. Feet. Left_foot,.feet. right_foot{    width:36px;    height:50px;    border-bottom-right-radius:6px;    border-bottom-left-radius:9px;    Background: #000;    Position:absolute;    top:406px;    left:88px;    -webkit-transform-origin:right top;}. Feet. left_foot{    border-bottom-right-radius:9px;    border-bottom-left-radius:6px;    left:130px;    -webkit-transform-origin:left top;}. Feet. Left_foot:after,.feet. right_foot:after{    content: ";    width:60px;    height:35px;    border-radius:20px 10px 21px 15px;    Background: #000;    Position:absolute;    left:-36px;    top:14.4px;    -webkit-transform:rotate (5deg);}. Feet. left_foot:after{    border-radius:10px 20px 15px 21px;    left:13px;    -webkit-transform:rotate ( -5deg);}

As follows:

Originally did not want to draw hair, feel strange difficult, finally tried a bit, or can make a appearance, then add it up. The principle and the two sides of the pants to achieve the same principle is the same, but the parameter value is not the same, we reference code to ponder:

. hair{    position:relative;}. left_hair_one{    width:130px;    height:100px;    border-radius:50%;    border-top:8px solid #000;    Position:absolute;    left:17px;    top:-17px;    -webkit-transform:rotate (27deg);}. left_hair_two{    width:80px;    height:80px;    border-radius:50%;    BORDER-TOP:6PX solid #000;    Position:absolute;    left:45px;    top:-10px;    -webkit-transform:rotate (15deg);}

To replenish the shadow portion of the soles:

. groundshadow{    width:200px;    height:2px;    border-radius:50%;    Background:rgba (0,0,0,0.3);    box-shadow:0 0 2px 4px rgba (0,0,0,0.3);    position:relative;    top:455px;    left:25px;}

The final result is the initial effect:

At this point you may ask: what then? Isn't it still moving?

Yes, here I would like to talk about the idea of implementation:

1. Hair: Hair I want to achieve is by the small wind gently blowing up, and then quickly collapsed, so blowing and falling down the allotted time is crucial;

2. Eyes: Eyes I imagine the scene is the small yellow people walking leisurely, and then from time to look at both sides of the scenery, so the eyes turn very leisurely, so the allotted time can be a little bit longer;

3. Mouth: Let the mouth move is indeed more difficult, because to move, the mask also has to change in real time, and can not hide, so the final realization is when it looked to the left after the sale of the Moe;

4. Hands and feet: This part is really difficult to lifelike, originally the foot is not normal walking state, so can only according to Chaplin grandfather's way of walking simulation, and left and right foot action is immediately realized rather than synchronous implementation. Hands, I am a simple simulation of the people in the walk with a hand-waving natural inertia, but also the left foot with right, right foot with left hand. Considering that its hands are on the back, so my swing amplitude is set to very small, effective but not obvious.

OK, I'll just put the animation code on it:

. left_hair_one{-webkit-animation:lefthair 2s ease-in-out infinite;} @-webkit-keyframes lefthair{0%,25%,31%,100%{} 30%{-webkit-transform:rotate (31deg) Translate3d ( -3px,-1p    x,0); }}.eyes. Lefteye. Left_blackeye,.eyes righteye. right_blackeye{-webkit-animation:blackeye 5s ease-in Infinite;}    @-webkit-keyframes blackeye{0%,20%,50%,70%,100%{-webkit-transform:translatex (0px);    } 30%,40%{-webkit-transform:translatex (15px);    } 80%,90%{-webkit-transform:translatex ( -15px); }}.eyes. Lefteye. Left_blackeye left_white,.eyes righteye. Right_blackeye right_white{-webkit-animation:whiteeye 5 s ease-in-out Infinite;}    @-webkit-keyframes whiteeye{0%,20%,50%,70%,100%{-webkit-transform:translatex (0px);    } 30%,40%{-webkit-transform:translate3d (3px,4px,0);    } 80%,90%{-webkit-transform:translate3d ( -15px,4px,0); }}.mouse. mouse_shape{-webkit-animation:mouse 5s ease-in-out Infinite;} @-webkit-keyframes mouse{40%,43%{width:45px;        height:25px;    top:180px;        } 0%,35%,48%,100%{width:55px;        height:35px;        top:175px;    -webkit-transform:rotate ( -35DEG); }}.mouse. mouse_shape:after{-webkit-animation:mouse_mask 5s ease-in-out Infinite;}        @-webkit-keyframes mouse_mask{40%,43%{width:60.5px;        top:-19.3px;    left:1.5px;        } 0%,35%,48%,100%{width:70px;        top:-16px;        left:3px;    -webkit-transform:rotate (33DEG); }}.hands. righthand{-webkit-animation:righthand. 8s Ease-in-out Infinite;}    @-webkit-keyframes righthand{0%,50%,100%{-webkit-transform:rotate (40deg);    } 30%{-webkit-transform:rotate (37deg) TranslateX (1px); }}.hands. lefthand{-webkit-animation:lefthand. 8s Ease-in-out Infinite;}    @-webkit-keyframes lefthand{0%,50%,100%{-webkit-transform:rotate ( -40deg); } 80%{-webkit-transform:rotate ( -37deg) TranslaTeX ( -1px); }}.feet. right_foot{-webkit-animation:rightfoot. 8s Ease-in-out Infinite;}    @-webkit-keyframes rightfoot{0%,50%,100%{-webkit-transform:rotate (0deg);    } 80%{-webkit-transform:rotate (10deg); }}.feet. left_foot{-webkit-animation:leftfoot. 8s Ease-in-out Infinite;}    @-webkit-keyframes leftfoot{0%,50%,100%{-webkit-transform:rotate (0deg);    } 30%{-webkit-transform:rotate ( -10deg); }}

More space, code to see a lot of chaos, if you feel lazy to tidy up, you can directly to my GitHub download this simple and fun case: Https://github.com/JR93/littleHuang

Thank you!