How to draw a jingle cat using CSS3_CSS/HTML

i just studied this case and thought it was more fun, so i practiced it. then i discovered that it is actually not difficult. if you often use ps or flash, you should know that it is very easy to draw a jingle cat, at least i think so. however, it is indeed my first time to draw with css3, so i am happy to try it. for a novice like me, it is really helpful. at least i know how to draw a simple character, plus some animation effects. , it’s alive, that’s even more fun! ok, before we start, let me show you the renderings:

ps: to be honest, i think it's quite cute. i often watched doraemon when i was a kid, and suddenly i felt very friendly and childlike. i instantly looked a lot younger, haha! warm smile

first, set up the html structure:

<div class="wrapper"> 
 <!--叮当猫整体--> 
 <div class="doraemon"> 
 <!--头部--> 
 <div class="head"> 
 <!--眼睛--> 
 <div class="eyes"> 
 <div class="eye left"> 
  <!--眼珠--> 
  <div class="black bleft"></div> 
 </div> 
 <div class="eye right"> 
  <div class="black bright"></div> 
 </div> 
 </div> 
 <!--脸部--> 
 <div class="face"> 
 <!--白色脸底--> 
 <div class="white"></div> 
 <!--鼻子--> 
 <div class="nose"> 
  <!--鼻子高光部分--> 
  <div class="light"></div> 
 </div> 
 <!--鼻子的竖线--> 
 <div class="nose_line"></div> 
 <!--嘴巴--> 
 <div class="mouth"></div> 
 <!--胡须--> 
 <div class="whiskers"> 
  <div class="whisker rtop r160"></div> 
  <div class="whisker 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> 
 <!--脖子和铃铛--> 
 <div class="choker"> 
 <!--铃铛--> 
 <div class="bell"> 
 <div class="bell_line"></div> 
 <div class="bell_circle"></div> 
 <div class="bell_under"></div> 
 <div class="bell_light"></div> 
 </div> 
 </div> 
 <!--身体--> 
 <div class="bodys"> 
 <!--肚子--> 
 <div class="body"></div> 
 <!--肚兜--> 
 <div class="wraps"></div> 
 <!--口袋--> 
 <div class="pocket"></div> 
 <!--遮住一半口袋，使其呈现半圆--> 
 <div class="pocket_mask"></div> 
 </div> 
 <!--右手--> 
 <div class="hand_right"> 
 <!--手臂--> 
 <div class="arm"></div> 
 <!--手掌--> 
 <div class="circle"></div> 
 <!--遮住手臂和身子交接处的线--> 
 <div class="arm_rewrite"></div> 
 </div> 
 <!--左手--> 
 <div class="hand_left"> 
 <div class="arm"></div> 
 <div class="circle"></div> 
 <div class="arm_rewrite"></div> 
 </div> 
 <!--脚--> 
 <div class="foot"> 
 <div class="left"></div> 
 <div class="right"></div> 
 <!--双脚之间的缝隙--> 
 <div class="foot_rewrite"></div> 
 </div> 
 </div> 
</div>

it is best to study the overall structure of jingle cat carefully first. this will be very helpful if you want to draw other characters by yourself in the future, and the ideas will be clearer.

next, we will demonstrate based on the head, neck, body, and feet. first, make some basic styles for the container wrapper and doraemon as a whole. doraemon as a whole doraemon sets the position to relative, mainly to facilitate the positioning of child elements/descendant elements.

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

the style of the head, because the head of jingle cat is not a perfect circle, so there is a slight deviation in width and height, then use border-radius to change the head from a rectangle to an oval, and then use a radial gradient from the upper right corner give the background a radial gradient, and then add a shadow to make it more three-dimensional. background: #07bbee; is for compatibility with lower version 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 what the effect is:

surprised that shenmgui is so ugly, don’t worry, let it come to life slowly:

/*脸部*/ 
 .doraemon .face { 
 position: relative; /*让所有脸部元素可自由定位*/ 
 z-index: 2; /*脸在头部背景上面*/ 
 } 
 /*白色脸底*/ 
 .doraemon .face .white { 
 width: 265px; /*设置宽高*/ 
 height: 195px; 
 border-radius: 150px; 
 position: absolute; /*进行绝对定位*/ 
 top: 75px; 
 left: 25px; 
 background: #fff; 
 /*此放射渐变也是使脸的左下角暗一些，看上去更真实*/ 
 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); 
 } 
 /*鼻子*/ 
 .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; /*鼻子在白色脸底下面*/ 
 } 
 /*鼻子上的高光*/ 
 .doraemon .face .nose .light { 
 width:10px; 
 height:10px; 
 border-radius: 5px; 
 box-shadow: 19px 8px 5px #fff; /*通过阴影实现高光*/ 
 } 
 /*鼻子下的线*/ 
 .doraemon .face .nose_line{ 
 width:3px; 
 height:100px; 
 background:#333; 
 position:absolute; 
 top:143px; 
 left:155px; 
 z-index:3; 
 } 
 /*嘴巴*/ 
 .doraemon .face .mouth{ 
 width:220px; 
 height:400px; 
 /*通过底边框加上圆角模拟微笑嘴巴*/ 
 border-bottom:3px solid #333; 
 border-radius:120px; 
 position:absolute; 
 top:-160px; 
 left:45px; 
 } 
 /*眼睛*/ 
 .doraemon .eyes { 
 position: relative; 
 z-index: 3; /*眼睛在白色脸底下面*/ 
 } 
 /*眼睛共同的样式*/ 
 .doraemon .eyes .eye{ 
 width:72px; 
 height:82px; 
 background:#fff; 
 border:2px solid #000; 
 border-radius:35px 35px; 
 position:absolute; 
 top:40px; 
 } 
 /*眼珠*/ 
 .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; 
 } 

after writing so many styles, what is the result:

i feel awkward no matter how i look at it, oh! we still need a beard and a white border on the bottom of the face, so let’s add them:

/*胡须背景，主要用于挡住嘴巴的一部分，不要显得太长*/ 
 .doraemon .whiskers{ 
 width:220px; 
 height:80px; 
 background:#fff; 
 border-radius:15px; 
 position:absolute; 
 top:120px; 
 left:45px; 
 z-index:2; /*在鼻子和眼睛下面*/ 
 } 
 /*所有胡子的公用样式*/ 
 .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; 
 } 
 /*右下胡子*/ 
 .doraemon .whiskers .rbottom { 
 left: 165px; 
 top: 65px; 
 } 
 /*左上胡子*/ 
 .doraemon .whiskers .ltop { 
 left: 0; 
 top: 25px; 
 } 
 /*左中胡子*/ 
 .doraemon .whiskers .lmiddle { 
 left: -2px; 
 top: 45px; 
 } 
 /*左下胡子*/ 
 .doraemon .whiskers .lbottom { 
 left: 0; 
 top: 65px; 
 } 
 /*胡子旋转角度*/ 
 .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); 
 } 

smile that’s right, it looks so comfortable! strike while the iron is hot and do the neck and body:

/*围脖*/ 
 .doraemon .choker { 
 width: 230px; 
 height: 20px; 
 background: #c40; 
 /*线性渐变 让围巾看上去更自然*/ 
 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; 
 } 
 /*铃铛*/ 
 .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; 
 } 
 /*双横线*/ 
 .doraemon .choker .bell_line { 
 width: 36px; 
 height: 2px; 
 background: #f9f12a; 
 border: 2px solid #333; 
 border-radius: 3px 3px 0 0; 
 position: absolute; 
 top: 10px; 
 } 
 /*黑点*/ 
 .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; 
 } 
 /*铃铛高光*/ 
 .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; 
 } 
 /*身子*/ 
 .doraemon .bodys { 
 position: relative; 
 top: -310px; 
 } 
 /*肚子*/ 
 .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; 
 } 
 /*白色肚兜*/ 
 .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; 
 } 
 /*口袋*/ 
 .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; 
 } 
 /*挡住口袋一半*/ 
 .doraemon .bodys .pocket_mask { 
 width: 134px; 
 height: 60px; 
 background:#fff; 
 border-bottom: 2px solid #000; 
 position:absolute; 
 top: 259px; 
 left: 92px; 
 }

okay, the neck and body are both there! above:

now it looks a bit like a decoration, but the smile is still so innocent. okay, let’s make the hands and feet quickly:

/

*左右手*/ 
 .doraemon .hand_right, .doraemon .hand_left { 
 height: 100px; 
 width: 100px; 
 position: absolute; 
 top: 272px; 
 left: 248px; 
 } 
 /*左手*/ 
 .doraemon .hand_left { 
 left: -10px; 
 } 
 /*手臂公共部分*/ 
 .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; 
 } 
 /*右手手臂*/ 
 .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); 
 } 
 /*左手手臂*/ 
 .doraemon .hand_left .arm { 
 top: 17px; 
 background: #0096be; /*背光一面使用纯色，使其有立体感*/ 
 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); 
 } 
 /*圆形手掌公共部分*/ 
 .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; 
 top: 32px; 
 } 
 /*左手手掌*/ 
 .doraemon .hand_left .circle { 
 left: -20px; 
 top: 32px; 
 } 
 /*手臂和身体结合处，使用背景遮住边框*/ 
 .doraemon .arm_rewrite { 
 height: 45px; 
 width: 5px; 
 background: #07beea; 
 position: relative; 
 } 
 /*右手结合处*/ 
 .doraemon .hand_right .arm_rewrite { 
 top: -45px; 
 left: 22px; 
 } 
 /*左手结合处*/ 
 .doraemon .hand_left .arm_rewrite { 
 top: -45px; 
 left: 60px; 
 background: #0096be; /*同理，背光一面使用纯色，使其有立体感*/ 
 } 
 /*脚部*/ 
 .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; 
 } 
 /*双脚之间的缝隙，加阴影使用立体感*/ 
 .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); 
 /*制作半圆效果*/ 
 border: 2px solid #000; 
 border-bottom: none; 
 border-radius: 40px 40px 0 0; 
 position: relative; 
 top: -11px; 
 left: 130px; 
 _left: 127px; 
 } 

okay, the final complete results:

look, is the effect the same as the first one? laughing, although it is done, it can still be made to move, such as the eyes. we can add an animation effect to it to make the eyes move:

/*眼珠*/ 
 .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; 
 } 
 
 /*让眼睛动起来*/ 
 @-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, in this way, the eyes will move. if you are interested, you can try it, but it cannot be displayed here. but if you have any better animation effects you can try, then this case is over.

ps: although this is just a case, it really helped me broaden my thinking. in fact, it may take a lot of time to create such an effect. at least for me, this is the case at the moment. the main difficulties are layout positioning and color. a reasonable combination can make the image more realistic and vivid! there may also be people who are not very familiar with graphics processing software such as ps or flash, and have no clue about using css3 to draw some characters or other effects. then they can go to some websites to refer to designers’ design composition, graphic decomposition and other related design knowledge. help us understand better.

the above is the entire content of this article. i hope you will like it and try it out.