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

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

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

首先，先把HTML结构搭建好：

<div > <!--叮当猫整体--> <div > <!--头部--> <div > <!--眼睛--> <div > <div >  <!--眼珠-->  <div ></div> </div> <div >  <div ></div> </div> </div> <!--脸部--> <div > <!--白色脸底--> <div ></div> <!--鼻子--> <div >  <!--鼻子高光部分-->  <div ></div> </div> <!--鼻子的竖线--> <div ></div> <!--嘴巴--> <div ></div> <!--胡须--> <div >  <div ></div>  <div ></div>  <div ></div>  <div ></div>  <div ></div>  <div ></div> </div> </div> </div> <!--脖子和铃铛--> <div > <!--铃铛--> <div > <div ></div> <div ></div> <div ></div> <div ></div> </div> </div> <!--身体--> <div > <!--肚子--> <div ></div> <!--肚兜--> <div ></div> <!--口袋--> <div ></div> <!--遮住一半口袋，使其呈现半圆--> <div ></div> </div> <!--右手--> <div > <!--手臂--> <div ></div> <!--手掌--> <div ></div> <!--遮住手臂和身子交接处的线--> <div ></div> </div> <!--左手--> <div > <div ></div> <div ></div> <div ></div> </div> <!--脚--> <div > <div ></div> <div ></div> <!--双脚之间的缝隙--> <div ></div> </div> </div> </div>

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：如何使用CSS3画出一个叮当猫

关键词：CSS