如何使用CSS3画出一个叮当猫_html/css_WEB-ITnose-tutoriel HTML-php.cn

如何使用CSS3画出一个叮当猫_html/css_WEB-ITnose

WBOY

Libérer： 2016-06-24 11:37:41

original

1061 Les gens l'ont consulté

刚学习了这个案例，然后觉得比较好玩，就练习了一下。然后发现其实也不难，如果你经常使用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>

Copier après la connexion

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

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

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

Copier après la connexion

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

.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); }

Copier après la connexion