如何使用CSS3画出一个叮当猫

网络编程 2021-07-05 11:30www.168986.cn编程入门

我们经常使用PS或者Flash制作动画，本文则介绍了如何用CSS3画出个叮当猫，实现过程很有趣，感兴趣的朋友可以参考一下

刚学习了这个案例，然后觉得比较好玩，就练习了一下。然后发现其实也不难，如果你经常使用PS或者Flash的话，应该就会知道画个叮当猫是很容易的事，至少我是这么觉得。，用CSS3画出来确实是第一次接触，所以很乐意去尝试一下，对于我这种菜鸟，确实是帮助不少，至少懂得如何去画一个简单的人物形象出来，再加上一些动画效果，就活了，那就更好玩了！OK，开始之前，先把效果图晒一下

PS:说实话，我觉得挺可爱的，小时候经常看多啦A梦，突然感觉很亲切，很童真，瞬间年轻了好多，哈哈！热烈的笑脸

，先把HTML结构搭建好

<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>

最好先把叮当猫的整体结构仔细研究一下，这对以后想要自己动手画别的人物形象很有帮助，思路会比较明朗。

接下来，我们按照头部，脖子，身体，脚部分别进行演示。将容器wrapper和叮当猫整体做一些基本的样式，叮当猫整体doraemon 设置position为relative，主要是为了便于子元素/后代元素进行定位。

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

头部head的样式，因为叮当猫的头部不是正圆，所以宽高有一点偏差，然后使用border-radius将头部从矩形变成椭圆形，然后再使用径向渐变从右上角给背景来个放射性渐变，然后在加个阴影，使其更有立体感，background#07bbee;是为了兼容低版本浏览器

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

看看效果到底怎么样

惊讶 shenmgui ,这么丑，别急，慢慢让它活过来

/脸部/ 
 .doraemon .face { 
 position: relative; /让所有脸部元素可自由定位/ 
 z-index: 2; /脸在头部背景上面/ 
 } 
 /白色脸底/ 
 .doraemon .face .white { 
 width: 265px; /设置宽高/ 
 height: 195px; 
 border-radius: 150px; 
 position: absolute; /进行绝对定位/ 
 : 75px; 
 left: 25px; 
 background: #fff; 
 /此放射渐变也是使脸的左下角暗一些，看上去更真实/ 
 background: -webkit-radial-gradient(right ,#fff 75%,#eee 80%,#999 90%,#444); 
 background: -moz-radial-gradient(right ,#fff 75%,#eee 80%,#999 90%,#444); 
 background: –ms-radial-gradient(right ,#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; 
 :110px; 
 left:140px; 
 z-index:3; /鼻子在白色脸底狼蚁网站SEO优化/ 
 } 
 /鼻子上的高光/ 
 .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; 
 :143px; 
 left:155px; 
 z-index:3; 
 } 
 /嘴巴/ 
 .doraemon .face .mouth{ 
 width:220px; 
 height:400px; 
 /通过底边框加上圆角模拟微笑嘴巴/ 
 border-bottom:3px solid #333; 
 border-radius:120px; 
 position:absolute; 
 :-160px; 
 left:45px; 
 } 
 /眼睛/ 
 .doraemon .eyes { 
 position: relative; 
 z-index: 3; /眼睛在白色脸底狼蚁网站SEO优化/ 
 } 
 /眼睛共同的样式/ 
 .doraemon .eyes .eye{ 
 width:72px; 
 height:82px; 
 background:#fff; 
 border:2px solid #000; 
 border-radius:35px 35px; 
 position:absolute; 
 :40px; 
 } 
 /眼珠/ 
 .doraemon .eyes .eye .black{ 
 width:14px; 
 height:14px; 
 background:#000; 
 border-radius:7px; 
 position:absolute; 
 :40px; 
 } 
 .doraemon .eyes .left{ 
 left:82px; 
 } 
 .doraemon .eyes .right { 
 left: 156px; 
 } 
 .doraemon .eyes .eye .bleft { 
 left: 50px; 
 } 
 
 .doraemon .eyes .eye .bright { 
 left: 7px; 
 }

写了这么多样式，结果是怎么样的呢

生病怎么看都觉得别扭，哦！还差胡须须和白色脸底的边框呢，咱给补上

/胡须背景，主要用于挡住嘴巴的一部分，不要显得太长/ 
 .doraemon .whiskers{ 
 width:220px; 
 height:80px; 
 background:#fff; 
 border-radius:15px; 
 position:absolute; 
 :120px; 
 left:45px; 
 z-index:2; /在鼻子和眼睛狼蚁网站SEO优化/ 
 } 
 /所有胡子的公用样式/ 
 .doraemon .whiskers .whisker { 
 width: 60px; 
 height: 2px; 
 background: #333; 
 position: absolute; 
 z-index: 2; 
 } 
 /右上胡子/ 
 .doraemon .whiskers .rTop { 
 left: 165px; 
 : 25px; 
 } 
 /右中胡子/ 
 .doraemon .whiskers .rMiddle { 
 left: 167px; 
 : 45px; 
 } 
 /右下胡子/ 
 .doraemon .whiskers .rBottom { 
 left: 165px; 
 : 65px; 
 } 
 /左上胡子/ 
 .doraemon .whiskers .lTop { 
 left: 0; 
 : 25px; 
 } 
 /左中胡子/ 
 .doraemon .whiskers .lMiddle { 
 left: -2px; 
 : 45px; 
 } 
 /左下胡子/ 
 .doraemon .whiskers .lBottom { 
 left: 0; 
 : 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); 
 }

微笑这样就对了，看着多舒服啊！趁热打铁，做脖子和身体

/围脖/ 
 .doraemon .choker { 
 width: 230px; 
 height: 20px; 
 background: #c40; 
 /线性渐变 让围巾看上去更自然/ 
 background: -webkit-gradient(linear,left ,left bottom,from(#c40),to(#800400)); 
 background: -moz-linear-gradient(center ,#c40,#800400); 
 background: -ms-linear-gradient(center ,#c40,#800400); 
 border: 2px solid #000; 
 border-radius: 10px; 
 position: relative; 
 : -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 , left bottom, from(#f9f12a),color-s(0.5, #e9e11a), to(#a9a100)); 
 background: -moz-linear-gradient(, #f9f12a, #e9e11a 75%,#a9a100); 
 background: -ms-linear-gradient(, #f9f12a, #e9e11a 75%,#a9a100); 
 box-shadow: -5px 5px 10px rgba(0,0,0,0.25); 
 position: absolute; 
 : 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; 
 : 10px; 
 } 
 /黑点/ 
 .doraemon .choker .bell_circle{ 
 width:12px; 
 height:10px; 
 background:#000; 
 border-radius:5px; 
 position:absolute; 
 :20px; 
 left:14px; 
 } 
 /黑点下的线/ 
 .doraemon .choker .bell_under{ 
 width: 3px; 
 height:15px; 
 background:#000; 
 position:absolute; 
 left: 18px; 
 :27px; 
 } 
 /铃铛高光/ 
 .doraemon .choker .bell_light{ 
 width:12px; 
 height:12px; 
 border-radius:10px; 
 box-shadow:19px 8px 5px #fff; 
 position:absolute; 
 :-5px; 
 left:5px; 
 opacity:0.7; 
 } 
 /身子/ 
 .doraemon .bodys { 
 position: relative; 
 : -310px; 
 } 
 /肚子/ 
 .doraemon .bodys .body { 
 width: 220px; 
 height: 165px; 
 background: #07beea; 
 background: -webkit-gradient(linear,right ,left ,from(#07beea),color-s(0.5, #0073b3),color-s(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; 
 :265px; 
 left:50px; 
 } 
 /白色肚兜/ 
 .doraemon .bodys .wraps { 
 width: 170px; 
 height: 170px; 
 background: #fff; 
 background: -webkit-gradient(linear, right , left bottom, from(#fff),color-s(0.75,#fff),color-s(0.83,#eee),color-s(0.90,#999),color-s(0.95,#444), to(#000)); 
 background: -moz-linear-gradient(right ,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000); 
 background: -ms-linear-gradient(right ,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000); 
 border: 2px solid #000; 
 border-radius: 85px; 
 position: absolute; 
 left: 72px; 
 : 230px; 
 } 
 /口袋/ 
 .doraemon .bodys .pocket { 
 width: 130px; 
 height: 130px; 
 border-radius: 65px; 
 background: #fff; 
 background: -webkit-gradient(linear, right , left bottom, from(#fff),color-s(0.70,#fff),color-s(0.75,#f8f8f8),color-s(0.80,#eee),color-s(0.88,#ddd), to(#fff)); 
 background: -moz-linear-gradient(right , #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%, #fff); 
 background: -ms-linear-gradient(right , #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%, #fff); 
 border: 2px solid #000; 
 position:absolute; 
 : 250px; 
 left: 92px; 
 } 
 /挡住口袋一半/ 
 .doraemon .bodys .pocket_mask { 
 width: 134px; 
 height: 60px; 
 background:#fff; 
 border-bottom: 2px solid #000; 
 position:absolute; 
 : 259px; 
 left: 92px; 
 }

好吧，脖子和身子都有啦！上图

现在看起来有点像摆设品，不过笑容还是那么单纯，好了，赶紧把手脚做出来

左右手/ 
 .doraemon .hand_right, .doraemon .hand_left { 
 height: 100px; 
 width: 100px; 
 position: absolute; 
 : 272px; 
 left: 248px; 
 } 
 /左手/ 
 .doraemon .hand_left { 
 left: -10px; 
 } 
 /手臂公共部分/ 
 .doraemon .arm { 
 width:80px; 
 height:50px; 
 background: #07beea; 
 background: -webkit-gradient(linear, left , left bottom, from(#07beea),color-s(0.85,#07beea), to(#555)); 
 background: -moz-linear-gradient(center , #07BEEA, #07BEEA 85%, #555); 
 background: -ms-linear-gradient(center , #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 { 
 : 17px; 
 -webkit-transform: rotate(35deg); 
 -moz-transform: rotate(35deg); 
 -ms-transform: rotate(35deg); 
 -o-transform: rotate(35deg); 
 transform: rotate(35deg); 
 } 
 /左手手臂/ 
 .doraemon .hand_left .arm { 
 : 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 , left bottom, from(#fff),color-s(0.5,#fff),color-s(0.70,#eee),color-s(0.8,#ddd), to(#999)); 
 background: -moz-linear-gradient(right , #fff, #fff 50%, #eee 70%, #ddd 80%,#999); 
 background: -ms-linear-gradient(right , #fff, #fff 50%, #eee 70%, #ddd 80%,#999); 
 position: absolute; 
 } 
 /右手手掌/ 
 .doraemon .hand_right .circle { 
 left: 40px; 
 : 32px; 
 } 
 /左手手掌/ 
 .doraemon .hand_left .circle { 
 left: -20px; 
 : 32px; 
 } 
 /手臂和身体结合处，使用背景遮住边框/ 
 .doraemon .arm_rewrite { 
 height: 45px; 
 width: 5px; 
 background: #07beea; 
 position: relative; 
 } 
 /右手结合处/ 
 .doraemon .hand_right .arm_rewrite { 
 : -45px; 
 left: 22px; 
 } 
 /左手结合处/ 
 .doraemon .hand_left .arm_rewrite { 
 : -45px; 
 left: 60px; 
 background: #0096be; /同理，背光一面使用纯色，使其有立体感/ 
 } 
 /脚部/ 
 .doraemon .foot { 
 width: 280px; 
 height: 40px; 
 position: relative; 
 : 55px; 
 left: 20px; 
 } 
 /左右脚共同样式/ 
 .doraemon .foot .left, .doraemon .foot .right { 
 width: 125px; 
 height: 30px; 
 background: #fff; 
 background: -webkit-gradient(linear, right , left bottom, from(#fff),color-s(0.75,#fff),color-s(0.85,#eee), to(#999)); 
 background: -moz-linear-gradient(right , #fff, #fff 75%, #eee 85%, #999); 
 background: -ms-linear-gradient(right , #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; 
 : 65px; 
 } 
 
 .doraemon .foot .right { 
 : 31px; 
 left: 141px; 
 } 
 /双脚之间的缝隙，加阴影使用立体感/ 
 .doraemon .foot .foot_rewrite { 
 width: 20px; 
 height: 10px; 
 background: #fff; 
 background: -webkit-gradient(linear, right , left bottom, from(#666),color-s(0.83,#fff), to(#fff)); 
 background: -moz-linear-gradient(right , #666, #fff 83%, #fff); 
 background: -ms-linear-gradient(right , #666, #fff 83%, #fff); 
 /制作半圆效果/ 
 border: 2px solid #000; 
 border-bottom: none; 
 border-radius: 40px 40px 0 0; 
 position: relative; 
 : -11px; 
 left: 130px; 
 _left: 127px; 
 }

好了，完整结果

看一下，效果是不是和一开始的一样呢大笑，虽然做好了，还是可以让它动起来的，比如眼睛，我们可以给它加个动画效果，让眼睛转动起来

/眼珠/ 
 .doraemon .eyes .eye .black { 
 width: 14px; 
 height: 14px; 
 background: #000; 
 border-radius: 7px; 
 position: absolute; 
 : 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，这样，眼睛就会动了，有兴趣的可以试一下，这里就无法展示了。如果你有什么更好的动画效果也可以尝试，那么这个案例就结束了。

PS虽然这只是一个案例，不过确实帮助我开阔思维，而且其实做一个这样的效果，可能会花费很多时间，至少对我来说目前确实是这样子，主要难点还是布局定位和颜色的合理搭配，才能使形象更加逼真生动！可能也有人对PS或者Flash等图形处理软件不是很熟，对用CSS3画出一些人物或者其他效果比较没有头绪，那么就可以去一些网站参考设计师们的设计构图，图形分解等相关设计知识，帮助我们更好地理解。

以上是本文的全部内容，希望大家可以喜欢，动手去实践一下。

上一篇：利用CSS3新特性创建透明边框三角下一篇：讨论CSS中的各类居中方式

如何使用CSS3画出一个叮当猫

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

如何使用CSS3画出一个叮当猫

编程语言

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设