How to Use CSS3 to draw a dingdangmao _ CSS/HTML

We often use PS or Flash to make animations. This article describes how to use CSS3 to draw a dingdang cat. The implementation process is very interesting. If you are interested, refer to the case you just learned, then I thought it was quite fun. I just practiced it. It is not difficult to find out. If you often use PS or Flash, you should know that it is easy to draw a cat, at least I think so. However, CSS 3 is the first contact, so I would like to try it out. For me, cainiao is actually a lot of help. At least I know how to draw a simple character image, adding some animation effects will make it even more fun! OK. Run the following picture before you start:

PS: To be honest, I think it's cute. When I was a child, I often watched Doraemon. I suddenly felt very kind and very childlike. I was so young. Haha! Smiling face

First, set up the HTML structure:

It is recommended that you carefully study the overall structure of Ding dangmao. This will be helpful for you to draw other characters and your ideas will be clearer.

Next, we will demonstrate the headers, necks, bodies, and feet. First, we will make some basic styles for the containers wrapper and Ding dangmao, and set the position to relative for the whole doraemon, mainly to facilitate the positioning of child/child element.

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

The head style. Because the head is not a positive circle, the width and height are slightly different. Then, use border-radius to change the header from a rectangle to an elliptical shape, then use the radial gradient to give a radioactive gradient to the background from the upper right corner, and then add a shadow to make it more stereoscopic. background: #07 bbee; is used to ensure compatibility with earlier browsers:

.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, It's so ugly. Don't worry. Let it live slowly:

/* Face */. doraemon. face {position: relative;/* allows all face elements to be positioned freely */z-index: 2; /* face on top of the head background */}/* white background */. doraemon. face. white {width: 265px;/* Set width and height */height: 195px; border-radius: 150px; position: absolute;/* absolute position */top: 75px; left: 25px; background: # fff;/* this radiation gradient also makes the lower left corner of the face darker and looks more realistic */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. face. nose {width: 30px; height: 30px; border-radius: 15px; background: # c93300; border: 2px solid #000; position: absolute; top: 110px; left: 140px; z-index: 3;/* the nose is under the white background */}/* highlights on the nose */. doraemon. face. nose. light {width: 10px; height: 10px; border-radius: 5px; box-shadow: 19px 8px 5px # fff; /* highlight by shadow */}/* line under the nose */. doraemon. face. nose_line {width: 3px; height: 100px; background: #333; position: absolute; top: 143px; left: 155px; z-index: 3;}/* mouth */. doraemon. face. mouth {width: 220px; height: 400px;/* simulate smiling mouth by adding rounded corners to the bottom border */border-bottom: 3px solid #333; border-radius: 120px; position: absolute; top:-160px; left: 45px;}/* eyes */. doraemon. eyes {position: relative; z-index: 3;/* the eyes are under the white background */}/* the style of the eyes */. doraemon. eyes. eye {width: 72px; height: 82px; background: # fff; border: 2px solid #000; border-radius: 35px 35px; position: absolute; top: 40px ;} /* eyes */. 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 the written statement:

It's awkward to be ill! What about the border between the beard and the white face:

/* The background of the beard, mainly used to block part of the mouth. Do not look 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 */}/* Public styles of all beards */. doraemon. whiskers. whisker {width: 60px; height: 2px; background: #333; position: absolute; z-index: 2 ;}/ * upper right beard */. doraemon. whiskers. rTop {left: 165px; top: 25px;}/* right middle beard */. doraemon. whiskers. rMiddle {left: 167px; top: 45px;}/* right down beard */. doraemon. whiskers. rBottom {left: 165px; top: 65px;}/* top left beard */. doraemon. whiskers. lTop {left: 0; top: 25px;}/* middle left beard */. doraemon. whiskers. lMiddle {left:-2px; top: 45px;}/* bottom left beard */. doraemon. whiskers. lBottom {left: 0; top: 65px;}/* beard Rotation Angle */. doraemon. whiskers. r160 {-webkit-transform: rotate (160deg);-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 );}

Just smile. how comfortable it looks! Tie your neck and body in the hot air:

/* Bib */. doraemon. choker {width: 230px; height: 20px; background: # c40;/* linear gradient make 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 line */. 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 spots */. doraemon. choker. bell_circle {width: 12px; height: 10px; background: #000; border-radius: 5px; position: absolute; top: 20px; left: 14px ;} /* line under the black spot */. doraemon. choker. bell_under {width: 3px; height: 15px; background: #000; position: absolute; left: 18px; top: 27px;}/* Bell highlights */. 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: #07 beea; background:-webkit-gradient (linear, right top, left top, from (#07 beea ), color-stop (0.5, #0073b3), color-stop (0.75, #00b0e0), to (# 0096be); background:-moz-linear-gradient (right center, #07 beea, #0073b3 50%, #00b0e0 75%, # 0096be 100%); background:-ms-linear-gradient (right center, #07 beea, #0073b3 50%, #00b0e0 75%, # 0096be 100%); border: 2px solid #333; position: absolute; top: 265px; left: 50px;}/* white apron */. 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 95%, #000); background:-ms-linear-gradient (right top, # fff, # fff 75%, # eee 83%, #999 90% 444, # 95%, #000 ); border: 2px solid #000; border-radius: 85px; position: absolute; left: 72px; top: 230px;}/* Pocket */. doraemon. bodys. pocket {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 half of the pocket */. 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! :

Now it looks a bit like a configuration item, but the smile is still so simple. Well, hurry up and make it:

/

* Right-left */. doraemon. hand_right ,. doraemon. hand_left {height: 100px; width: 100px; position: absolute; top: 272px; left: 248px;}/* left */. doraemon. hand_left {left:-10px;}/* Common arm part */. doraemon. arm {width: 80px; height: 50px; background: #07 beea; background:-webkit-gradient (linear, left top, left bottom, from (#07 beea ), color-stop (0.85, #07 beea), to (#555); background:-moz-linear-gradient (center top, #07 BEEA, #07 BEEA 85%, #555); background:-ms-linear-gradient (center top, #07 BEEA, #07 BEEA 85%, #555); border: 1px solid #000000; box-shadow: -10px 7px 10px rgba (0, 0, 0, 0.35); z-index:-1; position: relative;}/* Right 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;/* use solid color on the backlight side to make it stereoscopic */box-shadow: 5px-7px 10px rgba (0, 0, 0, 0, (0.25);-webkit-transform: rotate (145deg);-moz-transform: rotate (145deg);-ms-transform: rotate (145deg);-o-transform: rotate (145deg); transform: rotate (145deg);}/* Public part of the circular PALM */. 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 ;} /* palm of the right hand */. doraemon. hand_right. circle {left: 40px; top: 32px;}/* palm of the left hand */. doraemon. hand_left. circle {left:-20px; top: 32px;}/* combine the arm and body, and use the background to cover the border */. doraemon. arm_rewrite {height: 45px; width: 5px; background: #07 beea; position: relative;}/* right hand joint position */. doraemon. hand_right. arm_rewrite {top:-45px; left: 22px;}/* left-hand combination */. doraemon. hand_left. arm_rewrite {top:-45px; left: 60px; background: # 0096be;/* Similarly, the solid color is used on the backlight side to make it stereoscopic */}/* foot */. doraemon. foot {width: 280px; height: 40px; position: relative; top: 55px; left: 20px;}/* Common style of the left and right feet */. 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, and apply the stereoscopic effect to the shadow */. 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);/* Create a semi-circle effect */border: 2px solid #000; border-bottom: none; border-radius: 40px 40px 0 0; position: relative; top:-11px; left: 130px; _ left: Skip PX ;}

Okay. The complete result is as follows:

Let's see if the effect is the same as that at the beginning. Although it is done well, it can still be moved. For example, we can give it an animated effect, turn your eyes:

/* Eyes */. doraemon. eyes. eye. black {width: 14px; height: 14px; background: #000; border-radius: 7px; position: absolute; top: 40px;-webkit-animation: eyemove 3 s linear infinite; -moz-animation: eyemove 3 s linear infinite;-ms-animation: eyemove 3 s linear infinite;-o-animation: eyemove 3 s linear infinite; animation: eyemove 3 s linear infinite;}/* Get eyes moving */@-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 0;} 93% {margin:-22px 0 0 0 ;} 96% {margin: 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 0;} 96% {margin: 0 0 0 0; }}@-o-keyframes eyemove {70% {margin: 0 0 0 0;} 80% {margin:-22px 0 0 0 0;} 85% {margin: -22px 0 0 5px;} 90% {margin:-22px 10px 0 0;} 93% {margin:-22px 0 0 0 0;} 96% {margin: 0 0 0 0 ;}} @ keyframes eyemove {70% {margin: 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. In this way, your eyes will change. If you are interested, you can try it and it will not be displayed here. However, if you have any better animation effects, you can try it. This case is over.

PS: although this is only a case, it may take a lot of time to broaden my mind and make such an effect. At least for me, it is true for now, the main difficulty is to make the image more vivid and vivid only by positioning the layout and reasonable combination of colors! Some people may not be familiar with graphics processing software such as PS or Flash, but do not have a clue about using CSS3 to draw some figures or other effects, so they can go to some websites to refer to the designer's design diagram, graphic decomposition and other related design knowledge help us better understand.

The above is all the content of this article. I hope you will like it and try it out.