[css]我要用css画幅画(七) - 哆啦A梦

接着之前的[css]我要用css画幅画(六)，今天画的有所不同，画的是哆啦A梦，我们小时候对他的称呼其实是小叮当机器猫。

（PS:这次我要做的事情，很多人已经做过，这并不是什么创新，我只是在学习并记录下学习的过程）

这次就不多说CSS属性的基础概念了。 说说我画的过程吧， 好，进入正题。

因为和之前的瞎画不同，这次是画现有的东西。我认为临摹是比较简单的。 我先上网找了下要临摹的对象，找了个最中规中矩的图片，如下：

这对我来说不是一个简单的任务， 而我处理不简单的任务的解决方案，就是把他拆分再拆分，一直拆到问题无法再拆且可以解决为止。

拆分结果如下：

1. 头

　　1.1 眼睛

　　1.2 脸廓

　　1.3 鼻子

　　1.4 胡须

　　1.5 嘴唇

　　1.6 嘴巴

　　　　1.6.1 口腔

　　　　1.6.2 舌头

2. 身子

　　2.1 项圈

　　2.2 铃铛

　　2.3 躯干

　　2.4 肚兜

　　2.5 百宝袋

　　2.6 双手

　　　　2.6.1 手臂

　　　　2.6.2 拳头

　　2.7 双脚

　　　　2.7.1 腿

　　　　2.7.2 脚掌

这个画我无法一次性完成，最新的效果可以在这里看到： Demo

代码在这： https://github.com/bee0060/Css-Paint

（请根据关键字carton、doraemon找相应的文件）

之后我会陆续更新这幅画，有些进展之后会记录在该篇博客中。

--------------------------------------------------------------------------   2015.12.24 start   --------------------------------------------------------------------------

到目前为止， 完成了小叮当的头部。 看了效果的会发现，下巴处看起来不对， 没关系，等我加上他的围脖后，就能遮挡住这块不对劲的地方了。

先上代码：

 <div class="doraemon">
             <div class="circle border-black-1 head">
                 <div class="eyes">
                     <div class="circle pos-a bacc-white eye eye-left">
                         <div class="circle pos-r top-30 eye-pupil eye-pupil-left"></div>
                     </div>
                     <div class="circle pos-a bacc-white eye eye-right">
                         <div class="circle pos-r top-30 eye-pupil eye-pupil-right"></div>
                     </div>
                 </div>
                 <div class="border-black-2 bacc-white face">
                     <div class="circle pos-r border-black-2 bacc-brown-red nose">
                         <div class="circle pos-a bacc-white nose-light"></div>
                     </div>
                     <div class="m-hoz-auto pos-r bacc-white bread-field">

                     <div class="m-hoz-auto bacc-black nasal-groove"></div>
                         <div class="pos-a bacc-black bread bread-left bread-left-1"></div>
                         <div class="pos-a bacc-black bread bread-left bread-left-2"></div>
                         <div class="pos-a bacc-black bread bread-left bread-left-3"></div>
                         <div class="pos-a bacc-black bread bread-right bread-right-1"></div>
                         <div class="pos-a bacc-black bread bread-right bread-right-2"></div>
                         <div class="pos-a bacc-black bread bread-right bread-right-3"></div>
                     </div>

                     <div class="pos-r m-hoz-auto lips">
                         <div class="pos-a bacc-white border-black-2 lips-left"></div>
                         <div class="lips-center-left pull-left">
                             <div class="lips-center-left-inside circle border-black-2 bacc-white"></div>
                         </div>
                         <div class="lips-center pull-left bacc-white">
                             <div class="lips-center-inside pos-r m-hoz-auto border-black-2 bacc-mouse-red"></div>
                         </div>
                         <div class="lips-center-right pull-left">
                             <div class="lips-center-right-inside border-black-2 bacc-white">                            </div>
                         </div>
                         <div class="pos-a border-black-2 bacc-white lips-right"></div>
                     </div>

                     <div class="mouth border-black-2 m-hoz-auto bacc-mouse-red">
                         <div class="tongue pos-r m-hoz-auto bacc-mouse-red">
                             <div class="tongue-left pos-r pull-left">
                                 <div class="tongue-left-inside border-black-2 bacc-mouse-orange"></div>
                             </div>
                             <div class="tongue-right pos-r pull-left">
                                 <div class="tongue-right-inside border-black-2 bacc-mouse-orange"></div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>

head-html

 div {
     /*border: 1px solid #000;*/
 }

 /*位置选择器*/
 .pos-a {
     position: absolute;
 }

 .pos-r {
     position: relative;
 }

 .pull-left {
     float: left;
 }

 .pull-right {
     float: right;
 }

 .m-hoz-auto {
     margin-left: auto;
     margin-right: auto;
 }

 .left-32 {
     left: 32px;
 }

 .left-5 {
     left: 5px;
 }

 .top-30 {
     top: 30px;
 }

 /*形状选择器*/
 .circle {
     border-radius: 50%;
 }

 /*样式选择器*/
 .bacc-white {
     background-color: white;
 }

 .bacc-black {
     background-color: black;
 }

 .bacc-brown-red {
     background-color: rgb(216, 5, 23);
 }

 .bacc-mouse-red {
     background-color: #E80115;
 }

 .bacc-mouse-orange {
     background-color: #EF6C1C;
 }

 .border-black-1 {
     border: 1px solid black;
 }

 .border-black-2 {
     border: 2px solid black;
 }

 .border-black-3 {
     border: 3px solid black;
 }

 /*卡通组件*/
 .doraemon {
     height: 500px;
     width: 500px;
 }

 .head {
     background-color: rgb(2, 159, 227);
     height: 300px;
     margin: 0px auto;
     overflow: hidden;
     width: 310px;
 }

 .eyes {
     height: 80px;
     margin: -5px auto 0;
     padding-top: 10px;
     width: 120px;
 }

 .eye {
     border: 2px solid #000;
     box-sizing: border-box;
     height: 80px;
     width: 60px;
 }

 .eye-left {
     float: left;
     margin-left: 2px;
 }

 .eye-right {
     float: right;
     margin-left: 58px;
 }

 .eye-pupil {
     background-color: black;
     height: 18px;
     width: 18px;
 }

 .eye-pupil-left {
      left: 32px;
 }

 .eye-pupil-right {
      left: 5px;
 }

 .face {
     border-top-left-radius: 45% 60%;
     border-top-right-radius: 45% 60%;
     border-bottom-left-radius: 60% 85%;
     border-bottom-right-radius: 60% 85%;
     height: 230px;
     margin: -30px auto;
     width: 270px;

     z-index:;
 }

 .nose {
     height: 38px;
     margin: 16px auto 0;
     width: 38px;
 }

 .nose-light {
     height: 10px;
     right: 10px;
     top: 8px;
     width: 10px;
 }

 .nasal-groove{
     height: 45px;
     width: 2px;
     z-index:;
 }

 .bread-field {
     height: 44px;
     width: 240px;
     z-index:;
 }

 .bread {
     height: 2px;
     width: 80px;
 }

 .bread-left {
     left: 10px;
     -webkit-transform-origin: right top;
 }

 .bread-left-1 {

     top: -5px;
     -webkit-transform: rotate(20deg);
 }

 .bread-left-2 {
     top: 10px;
     -webkit-transform: rotate(5deg);
 }

 .bread-left-3 {
     top: 20px;
     -webkit-transform: rotate(-15deg);
 }

 .bread-right {
     right: 10px;
     -webkit-transform-origin: left top;
 }

 .bread-right-1 {
     top: -5px;
     -webkit-transform: rotate(-20deg);
 }

 .bread-right-2 {
     top: 10px;
     -webkit-transform: rotate(-5deg);
 }

 .bread-right-3 {
     top: 20px;
     -webkit-transform: rotate(15deg);
 }

 .lips {
     height: 10px;
     width: 250px;
 }

 .lips-center {
     height: 75px;
     overflow: hidden;
     width: 145px;
 }

 .lips-center-inside {
     border-top-left-radius: 65%;
     border-top-right-radius: 65%;
     border-style: none;
     border-top-style: solid;

     height: 75px;
     margin-left: -50px;
     width: 250px;
 }

 .lips-center-left {
     height: 40px;
     margin-left: 10px;
     overflow: hidden;
     width: 40px;
 }

 .lips-center-left-inside {
     border-bottom-left-radius: 50% 50%;
     border-bottom-right-radius: 50% 50%;
     border-top:none;
     border-left:none;
     border-right:none;
     content: " ";
     display: block;
     height: 45px;
     margin-left: -30px;
     margin-top: -36px;
     width: 100px;
 }

 .lips-center-right {
     height: 40px;
     overflow: hidden;
     width: 40px;
 }

 .lips-center-right-inside {
     border-bottom-left-radius: 50%;
     border-bottom-right-radius: 50%;
     border-top:none;
     border-left:none;
     border-right:none;
     content: " ";
     display: block;
     height: 45px;
     margin-left: -34px;
     margin-top: -37px;
     width: 100px;
 }

 .lips-left {
     border-top-left-radius: 60% 50%;
     border-top-right-radius: 0%;
     border-bottom-left-radius: 75% 50%;
     border-bottom-right-radius: 0%;
     border-right: none;
     height: 60px;
     left: -22px;
     top: -59px;
     width: 40px;

     -webkit-transform: rotate(15deg) ;
 }

 .lips-right {
     border-top-right-radius: 55% 50%;
     border-top-left-radius: 0%;
     border-bottom-right-radius: 80% 50%;
     border-bottom-left-radius: 0%;
     border-left: none;
     height: 60px;
     right: -22px;
     top: -59px;
     width: 40px;

     -webkit-transform: rotate(-9deg) ;
 }

 .mouth {
     border-bottom-left-radius: 50% 100%;
     border-bottom-right-radius: 50% 100%;
     border-top: none;
     height: 150px;
     margin-top:-50px;
     width: 240px;
 }

 .tongue {
     border-bottom-left-radius: 50% 100%;
     border-bottom-right-radius: 50% 100%;
     border-top: none;
     height: 65px;
     top: -30px;
     overflow: hidden;
     width: 170px;
 }

 .tongue-left {
     height: 65px;
     margin-top: 20px;
     margin-left: 15px;
     overflow: hidden;
     width: 80px;
     z-index:;
 }

 .tongue-left-inside {
     border-top-left-radius: 50% 80%;
     border-top-right-radius: 50% 80%;
     border-bottom: none;

     height: 65px;
     width: 80px;
     z-index:;

     -webkit-transform: rotate(-45deg);
 }

 .tongue-right {
     height: 60px;
     margin-top: -67px;
     margin-left: 83px;
     overflow: hidden;
     width: 80px;
     z-index:;
 }

 .tongue-right-inside {
     border-top-left-radius: 50% 80%;
     border-top-right-radius: 50% 80%;
     border-bottom: none;
     margin-top: 2px;
     margin-left: -11px;
     height: 60px;
     width: 80px;
     z-index:;

     -webkit-transform: rotate(45deg);
 }

common&head-css

codepen效果： https://codepen.io/bee0060/pen/gjpYLX

这个画画了快一个月，才把头画完，主要是因为懒，三天打鱼两天晒网，其次也在中途遇到几个难点，差点因为这些难点放弃了。

其中最难的要数嘴唇和嘴唇两边的类似半圆形（我叫它们做“嘴唇左边”和“嘴唇右边”）， 其中需要曲线、半圆、倾斜、遮盖来完成。其中最难处理的是曲线，解决了曲线问题后，就比较顺利的完成了后续的画。

嘴唇左边: 这里用了一个半圆加上一定的倾斜实现。但实现之初，半圆会突出到胡子的区域，我就给胡子的容器设置白色背景色，将突出到胡子区域的嘴唇左边部分遮盖。

嘴唇：     因为嘴唇是先向下凸，再向上，又向下的曲线，这里由3个圆角来拼接成这样的曲线，这里做曲线的时间是最长的，遇到的问题和解决方案在下面细说。

嘴唇右边：这里和嘴唇左边采取相同的方法。 只是圆角的角度不相同。

曲线:    我是用圆角来实现曲线的，相信很多人都是这么处理的。但是圆角有个问题，如果只有一面有边框（例如left），且设置圆角，这个边框会在末端慢慢变细，这会影响呈现效果。

　　　　我的解决方案是，增加一层容器， 再给容器设置overflow:none, 然后真正拥有圆角边框的对象在容器内， 然后调整容器和圆角对象的大小，让边框变细的部分超出容器，以此隐藏掉变细的部分。

画这幅画的过程一点也不优雅， 我无法通过数学的方式优雅的计算出每个对象的位置，每个圆角的弧度，每个倾斜的角度。 我采用最低级的方法， 在chrome中，选中元素并不断调整各种css属性，最终实现现在的效果。 所以这么做非常低效。 如果各位有什么好的工具或方法， 请不吝赐教。 在此先谢过。

到目前为止，只完成了头部， 之后（应该）会陆续完善直至完成。

谢谢观看。另外，圣诞快乐。

--------------------------------------------------------------------------   2015.12.24 end   --------------------------------------------------------------------------

--------------------------------------------------------------------------   2015.12.27 start   --------------------------------------------------------------------------

今天的更新不说功能， 只说一说这幅画的CSS规范和策略。

本画尽量遵照OOCSS的建议：http://www.w3cplus.com/css/oocss-concept

看了本画代码的同学可能会觉得很多html对象都用了一大串的class，但是细心的可能会发现有些类选择器出现过多次。

我这么写的目的是，在css的不同选择器中，尽量减少同名且同值的css属性代码。

在html上，可以像组件一样引用各种需要的选择器来实现效果。

这样可以让css尽量短小，且不重复。 虽然html对象的class属性很长，但是可以像组件一样更灵活的变换组合出需要的效果。

在本画中，只使用类选择器，即class选择器。

类选择器的种类主要分为4种：

1. 组件 - 用于描述哆啦A梦的各组成部分，如头(.head)、脸(.face)、眼睛(.eyes)等， 其中包含的css属性为以下3种不包含的，其实就是那些不知道怎么放进以下三种选择器中的css属性。

2. 形状 - 用于描述对象形状的，如正圆形， 暂时只有.circle类， 其中只有一个属性： border-radius: 50%;

3. 位置 - 这里不包括left、top等直接描述位置的，因为各组件的具体位置基本不可重用。这里描述的位置是：position、float，还有特殊的如margin纵向居中的类。

4. 样式 - 如背景色类、边框颜色类、边框宽度类等。 例如看原图可以看出， 这画其实主要就那么3、4种颜色， 所以我把颜色抽出来，就不需要在一大堆类中写重复的颜色css了。

类选择器的命名：

我用的编辑器是Sublime Text 2， 有一个非常好用也很常用的组件是Emmet，Emmet其中一个功能是可以打很少的字符来输入css，于是我的类选择器，如果其中只设置一个属性的话，一般就用这个属性和值在Emmet中的简写来表示，还有些用属性名的简写加上对应值的名称，用横杠链接来表示。如：

 /*
   左边为Emmet 中的简写，右边为表示的css属性
   pos ==> position
   bacc ==> background-color
   于是我有如下类选择器：
 */

 .pos-a {
     position: absolute;
 }

 .bacc-white {
     background-color: white;
 }

在html中使用选择器时， 也按照选择器类别的顺序： 组件->形状->位置->样式， 如下：

<div class="eye eye-left circle pos-a bacc-white"> </div>

其中组件有可能有扩展和子组件的关系，就根据组件选择器的辈份从前到后排列。

好了，我的html和css书写规范说完了。 下次更新应该至少会画个围脖（或叫项圈）吧。

谢谢观看。

--------------------------------------------------------------------------   2015.12.27 end   --------------------------------------------------------------------------

--------------------------------------------------------------------------   2016.01.04 end   --------------------------------------------------------------------------

经过几天断断续续的努力， 终于把这个画给完成了。 掌握了基本技巧之后，要完成这幅画的难度就降低很多了。最基本的技巧不外乎：

· 圆角

· 遮盖

· overflow hidden

· 倾斜

这次更新完成的内容较多， 包括如下：

1. 项圈 - 用一个较宽的椭圆实现， 只显示下半圆的大部分，用容器把不需要的超出部分隐藏。 铃铛里的曲线也是用会超出容器的两个上下并排的圆实现

2. 身体 - 用不规则的椭圆实现

3. 百宝袋 - 用两个不规则椭圆实现上边和下边

4. 双手 - 用椭圆和倾斜实现手臂，再用正圆的手掌遮盖不需要的部分

5. 双脚 - 用两个不规则椭圆实现左右两腿， 用一个白底黑边的椭圆实现裤裆（~。~），并遮盖在两腿之间，实现最终效果。 用椭圆和倾斜实现双脚。

大体上已经完成， 细节还是看得出差异，不过我个人已经比较满意这个效果了。 之后可能只会花一点点时间去微调一下细节部分。

所以， 这幅画到此结束。 谢谢观看。

--------------------------------------------------------------------------   2016.01.04 end   --------------------------------------------------------------------------

完.....

最终效果：  Demo

Code pen效果: http://codepen.io/bee0060/pen/rxjKxP

关键html：

 <div class="doraemon pull-left">
             <div class="head pos-r m-hoz-auto circle border-black-1 bacc-blue">
                 <div class="eyes">
                     <div class="eye eye-left circle pos-a bacc-white">
                         <div class="eye-pupil eye-pupil-left circle pos-r top-30"></div>
                     </div>
                     <div class="eye eye-right circle pos-a bacc-white">
                         <div class="eye-pupil eye-pupil-right circle pos-r top-30"></div>
                     </div>
                 </div>
                 <div class="face border-black-2 bacc-white">
                     <div class="nose circle pos-r border-black-2 bacc-brown-red">
                         <div class="nose-light circle pos-a bacc-white"></div>
                     </div>
                     <div class="bread-field m-hoz-auto pos-r bacc-white">

                     <div class="nasal-groove m-hoz-auto bacc-black"></div>
                         <div class="bread bread-left bread-left-1 pos-a bacc-black"></div>
                         <div class="bread bread-left bread-left-2 pos-a bacc-black"></div>
                         <div class="bread bread-left bread-left-3 pos-a bacc-black"></div>
                         <div class="bread bread-right bread-right-1 pos-a bacc-black"></div>
                         <div class="bread bread-right bread-right-2 pos-a bacc-black"></div>
                         <div class="bread bread-right bread-right-3 pos-a bacc-black"></div>
                     </div>

                     <div class="lips pos-r m-hoz-auto">
                         <div class="lips-left pos-a bacc-white border-black-2"></div>
                         <div class="lips-center-left pull-left">
                             <div class="lips-center-left-inside circle border-black-2 bacc-white"></div>
                         </div>
                         <div class="lips-center pull-left bacc-white">
                             <div class="lips-center-inside pos-r m-hoz-auto border-black-2 bacc-mouse-red"></div>
                         </div>
                         <div class="lips-center-right pull-left">
                             <div class="lips-center-right-inside border-black-2 bacc-white">                            </div>
                         </div>
                         <div class="lips-right pos-a border-black-2 bacc-white"></div>
                     </div>

                     <div class="mouth m-hoz-auto border-black-2 bacc-mouse-red">
                         <div class="tongue pos-r m-hoz-auto bacc-mouse-red">
                             <div class="tongue-left pos-r pull-left">
                                 <div class="tongue-left-inside border-black-2 bacc-mouse-orange"></div>
                             </div>
                             <div class="tongue-right pos-r pull-left">
                                 <div class="tongue-right-inside border-black-2 bacc-mouse-orange"></div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>

             <div class="collar pos-r m-hoz-auto oh">
                 <div class="collor-border-top pos-a circle border-black-2"></div>
                  <div class="collar-inside circle"></div>
                  <div class="collor-border-bottom pos-a circle border-black-2"></div>
             </div>
             <div class="bell pos-r m-hoz-auto oh circle bacc-bell-yellow border-black-2">
                 <div class="bell-middle-curve bell-middle-curve-1 circle border-black-2"></div>
                 <div class="bell-middle-curve bell-middle-curve-2 circle border-black-2"></div>
                 <div class="bell-hole circle bacc-white border-black-2"></div>
                 <div class="bell-gap m-hoz-auto border-black-1"></div>
             </div>
             <div class="body pos-r m-hoz-auto">
                 <div class="body-inside pos-r m-hoz-auto border-black-2 bacc-blue"></div>
                 <div class="belly pos-r m-hoz-auto border-black-2 bacc-white">
                     <div class="bag pos-r m-hoz-auto oh">
                         <div class="bag-top pos-a border-black-2"></div>
                         <div class="bag-bottom pos-r border-black-2"></div>
                     </div>
                 </div>
                 <div class="left-hand pos-r">
                     <div class="left-arm pos-r border-black-2 bacc-blue"></div>
                     <div class="left-palm pos-a    circle border-black-2 bacc-white"></div>
                 </div>
                 <div class="right-hand pos-r">
                     <div class="right-arm pos-r border-black-2 bacc-blue"></div>
                     <div class="right-palm pos-a circle border-black-2 bacc-white"></div>
                 </div>
                 <div class="left-leg pos-r oh">
                     <div class="left-leg-inside pos-r border-black-2 bacc-blue"></div>
                 </div>
                 <div class="crotch pos-a m-hoz-auto oh">
                     <div class="crotch-inside border-black-2 bacc-white">
                     </div>
                 </div>
                 <div class="right-leg pos-r oh">
                     <div class="right-leg-inside pos-r border-black-2 bacc-blue"></div>
                 </div>

                 <div class="left-foot pos-a border-black-2 bacc-white"></div>
                 <div class="right-foot pos-a border-black-2 bacc-white"></div>
             </div>
         </div>

完整css：

 div {
     /*border: 1px solid #000;*/
 }

 /*位置选择器*/
 .pos-a {
     position: absolute;
 }

 .pos-r {
     position: relative;
 }

 .pull-left {
     float: left;
 }

 .pull-right {
     float: right;
 }

 .m-hoz-auto {
     margin-left: auto;
     margin-right: auto;
 }

 .left-32 {
     left: 32px;
 }

 .left-5 {
     left: 5px;
 }

 .top-30 {
     top: 30px;
 }

 /*形状选择器*/
 .circle {
     border-radius: 50%;
 }

 /*样式选择器*/
 .bacc-white {
     background-color: white;
 }

 .bacc-black {
     background-color: black;
 }

 .bacc-blue {
     background-color: rgb(2, 159, 227);
 }

 .bacc-brown-red {
     background-color: rgb(216, 5, 23);
 }

 .bacc-mouse-red {
     background-color: #E80115;
 }

 .bacc-mouse-orange {
     background-color: #EF6C1C;
 }

 .bacc-bell-yellow {
     background-color: #F5D600;
 }

 .border-black-1 {
     border: 1px solid black;
 }

 .border-black-2 {
     border: 2px solid black;
 }

 .border-black-3 {
     border: 3px solid black;
 }

 .oh {
     overflow: hidden;
 }

 /*卡通组件*/
 .doraemon {
     height: 500px;
     width: 500px;
 }

 .head {
     height: 300px;
     overflow: hidden;
     width: 310px;
     z-index:;
 }

 .eyes {
     height: 80px;
     margin: -5px auto 0;
     padding-top: 10px;
     width: 120px;
 }

 .eye {
     border: 2px solid #000;
     box-sizing: border-box;
     height: 80px;
     width: 60px;
 }

 .eye-left {
     float: left;
     margin-left: 2px;
 }

 .eye-right {
     float: right;
     margin-left: 58px;
 }

 .eye-pupil {
     background-color: black;
     height: 18px;
     width: 18px;
 }

 .eye-pupil-left {
      left: 32px;
 }

 .eye-pupil-right {
      left: 5px;
 }

 .face {
     border-top-left-radius: 45% 60%;
     border-top-right-radius: 45% 60%;
     border-bottom-left-radius: 60% 85%;
     border-bottom-right-radius: 60% 85%;
     height: 230px;
     margin: -30px auto;
     width: 270px;

     z-index:;
 }

 .nose {
     height: 38px;
     margin: 16px auto 0;
     width: 38px;
 }

 .nose-light {
     height: 10px;
     right: 10px;
     top: 8px;
     width: 10px;
 }

 .nasal-groove{
     height: 45px;
     width: 2px;
     z-index:;
 }

 .bread-field {
     height: 44px;
     width: 240px;
     z-index:;
 }

 .bread {
     height: 2px;
     width: 80px;
 }

 .bread-left {
     left: 10px;
     -webkit-transform-origin: right top;
 }

 .bread-left-1 {

     top: -5px;
     -webkit-transform: rotate(20deg);
 }

 .bread-left-2 {
     top: 10px;
     -webkit-transform: rotate(5deg);
 }

 .bread-left-3 {
     top: 20px;
     -webkit-transform: rotate(-15deg);
 }

 .bread-right {
     right: 10px;
     -webkit-transform-origin: left top;
 }

 .bread-right-1 {
     top: -5px;
     -webkit-transform: rotate(-20deg);
 }

 .bread-right-2 {
     top: 10px;
     -webkit-transform: rotate(-5deg);
 }

 .bread-right-3 {
     top: 20px;
     -webkit-transform: rotate(15deg);
 }

 .lips {
     height: 10px;
     width: 250px;
 }

 .lips-center {
     height: 75px;
     overflow: hidden;
     width: 145px;
 }

 .lips-center-inside {
     border-top-left-radius: 65%;
     border-top-right-radius: 65%;
     border-style: none;
     border-top-style: solid;

     height: 75px;
     margin-left: -50px;
     width: 250px;
 }

 .lips-center-left {
     height: 40px;
     margin-left: 10px;
     overflow: hidden;
     width: 40px;
 }

 .lips-center-left-inside {
     border-bottom-left-radius: 50% 50%;
     border-bottom-right-radius: 50% 50%;
     border-top:none;
     border-left:none;
     border-right:none;
     content: " ";
     display: block;
     height: 45px;
     margin-left: -30px;
     margin-top: -36px;
     width: 100px;
 }

 .lips-center-right {
     height: 40px;
     overflow: hidden;
     width: 40px;
 }

 .lips-center-right-inside {
     border-bottom-left-radius: 50%;
     border-bottom-right-radius: 50%;
     border-top:none;
     border-left:none;
     border-right:none;
     content: " ";
     display: block;
     height: 45px;
     margin-left: -34px;
     margin-top: -37px;
     width: 100px;
 }

 .lips-left {
     border-top-left-radius: 60% 50%;
     border-top-right-radius: 0%;
     border-bottom-left-radius: 75% 50%;
     border-bottom-right-radius: 0%;
     border-right: none;
     height: 60px;
     left: -22px;
     top: -59px;
     width: 40px;

     -webkit-transform: rotate(15deg) ;
 }

 .lips-right {
     border-top-right-radius: 55% 50%;
     border-top-left-radius: 0%;
     border-bottom-right-radius: 80% 50%;
     border-bottom-left-radius: 0%;
     border-left: none;
     height: 60px;
     right: -22px;
     top: -59px;
     width: 40px;

     -webkit-transform: rotate(-9deg) ;
 }

 .mouth {
     border-bottom-left-radius: 50% 100%;
     border-bottom-right-radius: 50% 100%;
     border-top: none;
     height: 150px;
     margin-top:-50px;
     width: 240px;
 }

 .tongue {
     border-bottom-left-radius: 50% 100%;
     border-bottom-right-radius: 50% 100%;
     border-top: none;
     height: 65px;
     margin-left: 35px;
     top: -30px;
     overflow: hidden;
     width: 170px;
 }

 .tongue-left {
     height: 65px;
     margin-top: 20px;
     margin-left: 15px;
     overflow: hidden;
     width: 80px;
     z-index:;
 }

 .tongue-left-inside {
     border-top-left-radius: 50% 80%;
     border-top-right-radius: 50% 80%;
     border-bottom: none;

     height: 65px;
     width: 80px;
     z-index:;

     -webkit-transform: rotate(-45deg);
 }

 .tongue-right {
     height: 60px;
     margin-top: -67px;
     margin-left: 83px;
     overflow: hidden;
     width: 80px;
     z-index:;
 }

 .tongue-right-inside {
     border-top-left-radius: 50% 80%;
     border-top-right-radius: 50% 80%;
     border-bottom: none;
     margin-top: 2px;
     margin-left: -11px;
     height: 60px;
     width: 80px;
     z-index:;

     -webkit-transform: rotate(45deg);
 }

 .collar {
     margin-top:-40px;
     height: 40px;
     width: 220px;
     z-index:;
 }

 .collar-inside {
     border: 20px solid rgb(216, 5, 23);
     height: 50px;
     margin-top: -50px;
     margin-left: -19px;
     width: 220px;
 }

 .collor-border-top {
     height: 55px;
     margin-top: -38px;
     margin-left: 0px;
     width: 220px;
 }

 .collor-border-bottom {
     height: 73px;
     margin-top: -75px;
     margin-left: -17px;
     width: 250px;
 }

 .bell {
     height: 53px;
     margin-top: -15px;
     width: 53px;
     z-index:;
 }

 .bell-middle-curve {
     height: 50px;
     width: 100px;
 }

 .bell-middle-curve-1 {
     margin-top: 12px;
     margin-left:-27px;
 }

 .bell-middle-curve-2 {
     margin-top: -48px;
     margin-left:-27px;
 }

 .bell-hole {
     height: 8px;
     margin-top: -46px;
     margin-left: 21px;
     width: 8px;
 }

 .bell-gap {
     height: 16px;
     margin-left: 26px;
     width: 0px;
 }

 .body {
     height: 162px;
     top: -65px;
     width: 430px;
     z-index:;
 }

 .body-inside {
     border-top-left-radius: 15% 75%;
     border-top-right-radius: 12% 75%;
     border-bottom-left-radius: 15% 50%;
     border-bottom-right-radius: 25% 50%;
     height: 180px;
     margin-top: -5px;
     width: 220px;
     z-index:;
 }

 .belly {
     border-top-left-radius: 37% 50%;
     border-top-right-radius: 37% 50%;
     border-bottom-left-radius: 50% 50%;
     border-bottom-right-radius: 50% 50%;
     height: 125px;
     margin-top: -165px;
     width: 175px;
     z-index:;
 }

 .bag {
     height: 75px;
     margin-top: 50px;
     padding-top: 5px;
     width: 146px;
 }

 .bag-top {
     border-radius: 40%;
     height: 40px;
     margin-top: -42px;
     margin-left: -20px;
     width: 180px;
 }

 .bag-bottom {
     border-bottom-left-radius: 50% 32%;
     border-bottom-right-radius: 50% 32%;
     height: 140px;
     margin-top: -83px;
     margin-left: 0px;
     width: 142px;
 }

 .left-hand {
     height: 80px;
     margin-top: -139px;
     margin-left: 25px;
     width: 80px;
     z-index:;
 }

 .left-arm {
     border-top-left-radius: 45% 40%;
     border-bottom-left-radius: 45% 30%;
     height: 45px;
     margin-top: 33px;
     margin-left: 40px;
     width: 95px;

     -webkit-transform: rotate(-30deg);
     -webkit-transform-origin: left bottom;
 }

 .left-palm {
     height: 45px;
     margin-top: -50px;
     margin-left: 10px;
     width: 45px;
 }

 .right-hand {
     height: 80px;
     margin-top: -115px;
     margin-left: 225px;
     width: 80px;
     z-index:;
 }

 .right-arm {
     border-top-right-radius: 45% 40%;
     border-bottom-right-radius: 45% 30%;
     height: 45px;
     margin-top: 33px;
     margin-left: 40px;
     width: 95px;

     -webkit-transform: rotate(30deg);
     -webkit-transform-origin: right bottom;
 }

 .right-palm {
     height: 45px;
     margin-top: -52px;
     margin-left: 120px;
     width: 45px;
 }

 .left-leg {
     height: 63px;
     margin-top: 25px;
     margin-left: 101px;
     width: 120px;
     z-index:;
 }

 .left-leg-inside {
     border-top-left-radius: 35% 100%;
     border-bottom-left-radius: 25% 55%;
     border-bottom-right-radius: 100% 20%;
     border-right: none;
     height: 55px;
     margin-top: -16px;
     width: 120px;
 }

 .crotch {
     height: 15px;
     margin-top: -37px;
     margin-left: 192px;
     width: 40px;
     z-index:;
 }

 .crotch-inside {
     border-top-left-radius: 50% 60%;
     border-top-right-radius: 50% 60%;
     border-bottom: none;
     height: 50px;
     width: 40px;
 }

 .right-leg {
     height: 63px;
     margin-top: -62px;
     margin-left: 209px;
     width: 120px;
     z-index:;
 }

 .right-leg-inside {
     border-top-right-radius: 35% 100%;
     border-bottom-right-radius: 25% 55%;
     border-bottom-left-radius: 100% 20%;
     border-left: none;
     height: 55px;
     margin-top: -17px;
     margin-left: -4px;
     width: 120px;
 }

 .left-foot {
     border-top-left-radius: 60% 60%;
     border-top-right-radius: 50% 85%;
     border-bottom-left-radius: 43% 75%;
     border-bottom-right-radius: 50% 55%;
     height: 50px;
     margin-top: -32px;
     margin-left: 72px;
     width: 133px;

     -webkit-transform: rotate(-5deg);
 }

 .right-foot {
     border-top-left-radius: 50% 85%;
     border-top-right-radius: 60% 60%;
     border-bottom-left-radius: 50% 55%;
     border-bottom-right-radius: 43% 75%;
     height: 50px;
     margin-top: -30px;
     margin-left: 218px;
     width: 133px;

     -webkit-transform: rotate(5deg);
 }

（在这里再发一次demo链接， 希望可以省去你滚动回本文顶部的时间）

（至于画完这个接着做什么， 现在有几个想法可以做， 也可能做其他东西， 管他呢，随心而至就是了）

有任何问题或意见，欢迎交流。

如果发现本文有什么问题（如错别字），请不吝告知，谢谢。

转载请注明出处：[css]我要用css画幅画(七) - 哆啦A梦