How to use CSS3 to draw a jingle cat _css/html

Just learned this case, and then feel more fun, just practice a bit. Then find that it is not difficult, if you often use PS or flash, you should know that it is easy to draw a jingle cat, at least I think so. But, with CSS3 is really the first contact, so very happy to try, for me this rookie, is really help a lot, at least know how to draw a simple character image out, plus some animation effect, live, that is more fun! OK, before you start, take a look at the effect picture:

PS: To tell the truth, I think it is very cute, as a child often see a dream, suddenly feel very cordial, very childlike, instant young a lot, haha! A warm smile.

First of all, the HTML structure is built:

<div class= "wrapper" > <!--jingle cat overall--> <div class= "Doraemon" > <!--head--> <div "heads" & 
 Gt <!--eye--> <div class= "Eyes" > <div class= "eye left" > <!--eyeball--> <div class= "Black Bleft "></div> </div> <div class=" eye right "> <div class=" Black Bright "></div> </di V> </div> <!--facial--> <div class= "Face" > <!--the white facial bottom--> <div the "whites" class= 
 Gt 
 <!--nose--> <div class= "Nose" > <!--Nose high light section--> <div class= "Light" ></div> </div>  
 <!--nose vertical--> <div class= "Nose_line" ></div> <!--mouth--> <div "class=" ></div> <!--Beard--> <div class= "Whiskers" > <div class= "Whisker rtop r160" ></div> <div class= "W Hisker rmiddle "></div> <div class=" Whisker rbottom R20 ></div> <div class= "Whisker ltop R20" ></div> <div class= "Whisker lmiddle" ></div> <div class= "Whisker lbottom r160" ></div> </div > </div> </div> <!--neck and Bell--> <div class= "Choker" > <!--bells--> <div class= "be ll "> <div class=" bell_line "></div> <div class=" bell_circle "></div> <div class=" Bell_un Der "></div> <div class=" bell_light "></div> </div> </div> <!--body--> <di V class= "Bodys" > <!--belly--> <div class= "Body" ></div> <!--Dudou--> <div class= "wraps" > </div> <!--pocket--> <div class= "Pocket" ></div> <!--cover half of the pockets to make it appear semicircle--> <div class= "Pock Et_mask "></div> </div> <!--right hand--> <div class=" Hand_right "> <!--arm--> <div CLA ss= "Arm" ></div> <!--palm--> <div class= "Circle" ></div> <!--cover the line between the arms and body junction--> <div class= "Arm_rewrite" >&Lt;/div> </div> <!--left hand--> <div class= "Hand_left" > <div class= "arm" ></div> <d IV class= "Circle" ></div> <div class= "Arm_rewrite" ></div> </div> <!--foot--> <div class= "Foot" > <div class= "left" ></div> <div class= "right" ></div> <!--gap between feet--> &

 Lt;div class= "Foot_rewrite" ></div> </div> </div> </div>

It is best to carefully study the overall structure of the jingle Cat, which is helpful in the future to draw the image of other characters, the idea will be more clear.

Next, we demonstrate the head, neck, body, foot, respectively. First of all, the container wrapper and jingle Cat as a whole to do some basic style, jingle cat overall Doraemon set position as relative, mainly to facilitate the child element/descendant element positioning.

. wrapper{ 
 margin:50px 0 0 500px; 
} 
. doraemon{ 
 position:relative; 

Head heads style, because the cat's head is not a positive circle, so the width of a little deviation, and then use Border-radius the head from the rectangle to oval, and then use the radial gradient from the upper right corner of the background to a radioactive gradient, and then add a shadow, make it more three-dimensional, Background: #07bbee; to be compatible with the low version browser:

. Doraemon. head { 
 position:relative; 
 width:320px; 
 height:300px; 
 border-radius:150px; 
 Background: #07bbee; 
 Background:-webkit-radial-gradient (right top, #fff 10%, #07bbee 20%, #10a6ce 75%, #000); 
 Background:-moz-radial-gradient (right top, #fff 10%, #07bbee 20%, #10a6ce 75%, #000); 
 Background:-ms-radial-gradient (right top, #fff 10%, #07bbee 20%, #10a6ce 75%, #000); 
 border:2px solid #555; 
 box-shadow:-5px 10px 15px Rgba (0,0,0,0.45); 
} 

Let's see how it works:

Surprised Shenmgui, so ugly, don't worry, slowly let it come alive:

* * Face {position:relative * * * to allow all facial elements to be Doraemon/z-index:2, * * face on the head background////* white face bottom * * * Doraemon. 
 Face White {width:265px/* set wide/high/height:195px; 
 border-radius:150px; Position:absolute; 
 /* for absolute positioning * * * TOP:75PX; 
 left:25px; 
 Background: #fff; 
 /* This radial gradient also makes the lower left corner of the face darker, it looks more real/background:-webkit-radial-gradient (right top, #fff 75%, #eee 80%, #999 90%, #444); 
 Background:-moz-radial-gradient (right top, #fff 75%, #eee 80%, #999 90%, #444); 
 Background:–ms-radial-gradient (right top, #fff 75%, #eee 80%, #999 90%, #444); 
 * * * nose/Doraemon. nose{width:30px; 
 height:30px; 
 border-radius:15px; 
 Background: #c93300; 
 border:2px solid #000; 
 Position:absolute; 
 top:110px; 
 left:140px; Z-index:3; 
 * * Nose is under the white face bottom * * * * * nose high light/Doraemon. Nose. light {width:10px; 
 height:10px; 
 border-radius:5px; BOX-SHADOW:19PX 8px 5px #fff; 
 * * Through the shadow to achieve high light * * * * * under the nose Line/Doraemon. Face nose_line{width:3px; 
 height:100px; Background: #333; 
 Position:absolute; 
 top:143px; 
 left:155px; 
 Z-index:3; 
 * * * * mouth/Doraemon. mouth{width:220px; 
 height:400px; 
 * * Through the bottom border plus rounded corners to simulate a smile mouth/border-bottom:3px solid #333; 
 border-radius:120px; 
 Position:absolute; 
 top:-160px; 
 left:45px; 
 * * * Eye/Doraemon eyes {position:relative; Z-index:3; 
 * * Eyes in the white face under the bottom * * * * eyes common style/Doraemon eyes eye{width:72px; 
 height:82px; 
 Background: #fff; 
 border:2px solid #000; 
 border-radius:35px 35px; 
 Position:absolute; 
 top:40px; 
 * * * * eye/Doraemon eyes eye black{width:14px; 
 height:14px; 
 Background: #000; 
 border-radius:7px; 
 Position:absolute; 
 top:40px; 
 }. Doraemon. Eyes left{left:82px; 
 }. Doraemon. Eyes. Right {left:156px; 
 }. Doraemon. Eyes. Eye. bleft {left:50px; 
 }. Doraemon. Eyes. Eye. Bright {left:7px; 
 }

What is the result of writing so many styles:

It feels awkward to look sick, oh! Beard must and white face bottom of the border, I give up:

* * Beard background, mainly used to block a part of the mouth, do not appear too long * * Doraemon whiskers{width:220px; 
 height:80px; 
 Background: #fff; 
 border-radius:15px; 
 Position:absolute; 
 top:120px; 
 left:45px; Z-index:2; 
 * * Under the nose and eyes * * * * All the common style of beard/Doraemon whiskers whisker {width:60px; 
 height:2px; 
 Background: #333; 
 Position:absolute; 
 Z-index:2; 
 }/* * * Doraemon whiskers rtop {left:165px; 
 top:25px; 
 }/* Doraemon whiskers rmiddle {left:167px; 
 top:45px; 
 /*/* Right-beard/Doraemon whiskers Rbottom {left:165px; 
 top:65px; 
 } * * * * Doraemon whiskers ltop {left:0; 
 top:25px; 
 }/* Left-middle beard/Doraemon. Whiskers. Lmiddle: -2px; 
 top:45px; 
 /*/* Left down beard/Doraemon whiskers Lbottom {left:0; 
 top:65px; 
 } * * Doraemon whiskers r160 {-webkit-transform:rotate (160deg) with beard rotation angle. 
 -moz-transform:rotate (160DEG); 
 -ms-transform:rotate (160DEG); 
 -o-transform:rotate (160DEG); 
 Transform:rotate (160DEG); }. DoraEmon. Whiskers. R20 {-webkit-transform:rotate (200deg); 
 -moz-transform:rotate (200DEG); 
 -ms-transform:rotate (200DEG); 
 -o-transform:rotate (200DEG); 
 Transform:rotate (200DEG);  }

Smile so that's right, look more comfortable Ah! Strike the iron while doing the neck and body:

* * Doraemon. Choker {width:230px; 
 height:20px; 
 Background: #c40; 
 /* Linear gradient makes the scarf look more natural * * Background:-webkit-gradient (linear,left top,left bottom,from (#c40), to (#800400)); 
 Background:-moz-linear-gradient (center top, #c40, #800400); 
 Background:-ms-linear-gradient (center top, #c40, #800400); 
 border:2px solid #000; 
 border-radius:10px; 
 position:relative; 
 Top: -40px; 
 left:45px; 
 Z-index:4; 
 } * * Bell/Doraemon choker Bell {width:40px; 
 height:40px; _overflow:hidden; 
 /*ie6 hack*/border:2px solid #000; 
 border-radius:50px; 
 Background: #f9f12a; 
 Background:-webkit-gradient (linear, left top, left bottom, from (#f9f12a), Color-stop (0.5, #e9e11a), to (#a9a100)); 
 Background:-moz-linear-gradient (top, #f9f12a, #e9e11a 75%, #a9a100); 
 Background:-ms-linear-gradient (top, #f9f12a, #e9e11a 75%, #a9a100); 
 Box-shadow: -5px 5px 10px Rgba (0,0,0,0.25); 
 Position:absolute; 
 top:5px; 
 left:90px; }/* Double horizontal/Doraemon choker Bell_line {Width:36px; 
 height:2px; 
 Background: #f9f12a; 
 border:2px solid #333; 
 border-radius:3px 3px 0 0; 
 Position:absolute; 
 top:10px; 
 } * * Black dot/Doraemon choker bell_circle{width:12px; 
 height:10px; 
 Background: #000; 
 border-radius:5px; 
 Position:absolute; 
 top:20px; 
 left:14px; 
 /* * Doraemon choker bell_under{width:3px; 
 height:15px; 
 Background: #000; 
 Position:absolute; 
 left:18px; 
 top:27px; 
 } * * Bell high light/Doraemon choker bell_light{width:12px; 
 height:12px; 
 border-radius:10px; 
 BOX-SHADOW:19PX 8px 5px #fff; 
 Position:absolute; 
 top:-5px; 
 left:5px; 
 opacity:0.7; 
 } * * Body/Doraemon bodys {position:relative; 
 Top: -310px; 
 * * * Belly/Doraemon bodys. body {width:220px; 
 height:165px; 
 Background: #07beea; Background:-webkit-gradient (linear,right top,left top,from (#07beea), Color-stop (0.5, #0073b3), Color-stop (0.75,# 
 00B0E0), to (#0096be)); Background:-moz-linear-gradient (right center, #07beea, #0073b3 50%, #00b0e0 75%, #0096be 100%); 
 Background:-ms-linear-gradient (right center, #07beea, #0073b3 50%, #00b0e0 75%, #0096be 100%); 
 border:2px solid #333; 
 Position:absolute; 
 top:265px; 
 left:50px; 
 }/* White Dudou/Doraemon. Bodys Wraps {width:170px; 
 height:170px; 
 Background: #fff; Background:-webkit-gradient (linear, right top, left bottom, from (#fff), Color-stop (0.75, #fff), Color-stop (0.83, #eee), 
 Color-stop (0.90, #999), Color-stop (0.95, #444), to (#000)); 
 Background:-moz-linear-gradient (right top, #fff, #fff 75%, #eee 83%, #999 90%, #444, #000); 
 Background:-ms-linear-gradient (right top, #fff, #fff 75%, #eee 83%, #999 90%, #444, #000); 
 border:2px solid #000; 
 border-radius:85px; 
 Position:absolute; 
 left:72px; 
 top:230px; 
 }/* Pocket/Doraemon. Bodys. width:130px; 
 height:130px; 
 border-radius:65px; 
 Background: #fff; Background:-webkit-gradient (linear, right top, left bottom, from (#fff), Color-stop (0.70, #fff), Color-stop (0.75,# F8F8F8), Color-stop (0.80, #eee), Color-stop (0.88, #ddd), to (#fff)); 
 Background:-moz-linear-gradient (right top, #fff, #fff 70%, #f8f8f8 75%, #eee 80%, #ddd 88%, #fff); 
 Background:-ms-linear-gradient (right top, #fff, #fff 70%, #f8f8f8 75%, #eee 80%, #ddd 88%, #fff); 
 border:2px solid #000; 
 Position:absolute; 
 top:250px; 
 left:92px; 
 /* block pocket Half/Doraemon. Bodys. pocket_mask {width:134px; 
 height:60px; 
 Background: #fff; 
 border-bottom:2px solid #000; 
 Position:absolute; 
 top:259px; 
 left:92px; }

All right, neck and body! Image above:

Now it looks a bit like furnishings, but the smile is still so simple, well, hurriedly hands and feet to do out:

/

* Doraemon Hand_right, Doraemon hand_left {height:100px; 
 width:100px; 
 Position:absolute; 
 top:272px; 
 left:248px; 
 }/* Left hand/Doraemon. Hand_left: -10px; 
 * * * ARM public part/Doraemon. arm {width:80px; 
 height:50px; 
 Background: #07beea; 
 Background:-webkit-gradient (linear, left top, left bottom, from (#07beea), Color-stop (0.85, #07beea), to (#555)); 
 Background:-moz-linear-gradient (center top, #07BEEA, #07BEEA 85%, #555); 
 Background:-ms-linear-gradient (center top, #07BEEA, #07BEEA 85%, #555); 
 border:1px solid #000000; 
 Box-shadow: -10px 7px 10px rgba (0, 0, 0, 0.35); 
 Z-index:-1; 
 position:relative; 
 }/* Right hand arm/Doraemon. hand_right. arm {top:17px; 
 -webkit-transform:rotate (35DEG); 
 -moz-transform:rotate (35DEG); 
 -ms-transform:rotate (35DEG); 
 -o-transform:rotate (35DEG); 
 Transform:rotate (35DEG); 
 * * * left arm/Doraemon hand_left. arm {top:17px; Background: #0096be; /* Backlight side of the use of solid color, so that it has three-dimensional sense * * box-shadow:5px-7px 10px rgba (0, 0, 0, 0.25); 
 -webkit-transform:rotate (145DEG); 
 -moz-transform:rotate (145DEG); 
 -ms-transform:rotate (145DEG); 
 -o-transform:rotate (145DEG); 
 Transform:rotate (145DEG); 
 } * * Circular palm public part/Doraemon. circle {width:60px; 
 height:60px; 
 border-radius:30px; 
 border:2px solid #000; 
 Background: #fff; Background:-webkit-gradient (linear, right top, left bottom, from (#fff), Color-stop (0.5, #fff), Color-stop (0.70, #eee), 
 Color-stop (0.8, #ddd), to (#999)); 
 Background:-moz-linear-gradient (right top, #fff, #fff 50%, #eee 70%, #ddd 80%, #999); 
 Background:-ms-linear-gradient (right top, #fff, #fff 50%, #eee 70%, #ddd 80%, #999); 
 Position:absolute; 
 * * * * * * * Doraemon hand_right Circle {left:40px, right hand palm. 
 top:32px; 
 * * * Left palm/Doraemon. Hand_left. Circle: -20px; 
 top:32px; 
 * * * arm and body Joint, use background cover border/Doraemon. arm_rewrite {height:45px; 
 width:5px; 
 Background: #07beea; 
 position:relative; /* * Right hand joint/Doraemon. Hand_rIght. arm_rewrite {top: -45px; 
 left:22px; 
 /* Left hand Joint/Doraemon. Hand_left. arm_rewrite {top: -45px; 
 left:60px; Background: #0096be; 
 * For the same reason, the backlight uses a solid color, so that it has three-dimensional "* * * * feet * * Doraemon foot {width:280px; 
 height:40px; 
 position:relative; 
 top:55px; 
 left:20px; 
 }/* Doraemon foot left,. Doraemon. Foot. Right {width:125px; 
 height:30px; 
 Background: #fff; Background:-webkit-gradient (linear, right top, left bottom, from (#fff), Color-stop (0.75, #fff), Color-stop (0.85, #eee), 
 to (#999)); 
 Background:-moz-linear-gradient (right top, #fff, #fff 75%, #eee 85%, #999); 
 Background:-ms-linear-gradient (right top, #fff, #fff 75%, #eee 85%, #999); 
 border:2px solid #333; 
 border-radius:80px 60px 60px 40px; 
 Box-shadow: -6px 0 10px rgba (0, 0, 0, 0.35); 
 position:relative; 
 }. Doraemon. Foot. Left {left:8px; 
 top:65px; 
 }. Doraemon. Foot. Right {top:31px; 
 left:141px; * * * The gap between the feet, add shadows using three-dimensional doraemon. Foot Foot_rewrite {width:20px; 
 height:10px; 
 Background: #fff; 
 Background:-webkit-gradient (linear, right top, left bottom, from (#666), Color-stop (0.83, #fff), to (#fff)); 
 Background:-moz-linear-gradient (right top, #666, #fff 83%, #fff); 
 Background:-ms-linear-gradient (right top, #666, #fff 83%, #fff); 
 * * Make semicircle effect * * border:2px solid #000; 
 Border-bottom:none; 
 border-radius:40px 40px 0 0; 
 position:relative; 
 Top: -11px; 
 left:130px; 
 _left:127px;  }

All right, finally, the full result:

Look, the effect is not the same as the beginning of laughter, although done, but still can make it move, such as eyes, we can give it animation effect, let the eyes rotate:

* * * eye/Doraemon eyes eye black {width:14px; 
 height:14px; 
 Background: #000; 
 border-radius:7px; 
 Position:absolute; 
 top:40px; 
 -webkit-animation:eyemove 3s linear infinite; 
 -moz-animation:eyemove 3s linear infinite; 
 -ms-animation:eyemove 3s linear infinite; 
 -o-animation:eyemove 3s linear infinite; 
 Animation:eyemove 3s linear infinite; * * Let the eyes move/@-webkit-keyframes eyemove {70%{margin:0 
 0 0 0; 
 } 80% {margin: -22px 0 0 0; 
 } 85% {margin: -22px 0 0 5px; 
 } 90% {margin: -22px 10px 0 0; 
 } 93% {margin: -22px 0 0 0; 
 } 96% {margin:0 0 0 0; 
 }} @-moz-keyframes Eyemove {70% {margin:0 0 0 0; 
 } 80% {margin: -22px 0 0 0; 
 } 85% {margin: -22px 0 0 5px; 
 } 90% {margin: -22px 10px 0 0; 
 } 93% {margin: -22px 0 0 0; 
 } 96% {margin:0 0 0 0; 
 }} @-o-keyframes Eyemove {70% {margin:0 0 0 0; 
 } 80% {margin: -22px 0 0 0; } 85% {mArgin: -22px 0 0 5px; 
 } 90% {margin: -22px 10px 0 0; 
 } 93% {margin: -22px 0 0 0; 
 } 96% {margin:0 0 0 0; 
 }} @keyframes Eyemove {70% {margin:0 0 0 0; 
 } 80% {margin: -22px 0 0 0; 
 } 85% {margin: -22px 0 0 5px; 
 } 90% {margin: -22px 10px 0 0; 
 } 93% {margin: -22px 0 0 0; 
 } 96% {margin:0 0 0 0; 

 } 
 }

OK, so that the eyes will move, interested can try, here will not be shown. But if you have any better animations to try, the case is over.

PS: Although this is only a case, but it does help me broaden my mind, and actually do a such effect, it may take a lot of time, at least for me at present is indeed this way, the main difficulty or the layout of the positioning and color reasonable collocation, in order to make the image more lifelike and vivid! May also be a PS or flash, such as graphics processing software is not very familiar with the use of CSS3 to draw some characters or other effects are not a clue, then you can go to some Web site reference designers design composition, graphic decomposition and other related design knowledge, to help us better understand.

The above is the entire content of this article, I hope you can enjoy, hands-on to practice.