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

时间：2020-12-01 04:43:07

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

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

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

}

　　

相关文章