使用CSS3属性来画出一个哆啦A梦;
下面是代码的简单实现，以及用到的一些属性介绍。

图片结构拆分

我们大致的把这个胖子分成两部分，head和body，当然也把双脚也加上。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<div class="fat_pet">
  <!-- head part -->
  <header class="pet_head">
    <!-- eyes -->
    <div class="left_eye"></div>
    <div class="right_eye"></div>
    <!-- mustache -->
    <div class="left_mustache"></div>
    <div class="right_mustache"></div>
    <!-- mouth -->
    <div class="mouth"></div>
  </header>
  <!-- pet_collar -->
  <div class="pet_collar">
    <div class="pet_bell">
      <div class="pet_bell_wig"></div>
    </div>
  </div>
  <!-- pet_body -->
  <section class="pet_body">
    <!-- pet_belly -->
    <div class="pet_belly"></div>
    <!-- pet_waist -->
    <div class="pet_waist"></div>
    <!-- pet_arms -->
    <div class="pet_arms">
      <div class="left_arm"></div>
      <div class="right_arm"></div>
    </div>
  </section>
  <!-- pet_footer -->
  <div class="pet_footer">
    <div class="left_foot"></div>
    <div class="right_foot"></div>
  </div>
</div>

我们先给整个身体一个站立的空间，命名为”fat_pet”。

脑袋

大脑袋要给点特殊的配置，比如CSS3的 after,before…等这些伪元素.伪元素的语法是这样子的：

1
selector:pseudo-element {property:value;}

常见的伪元素以及例子：

  • eg:1 first-line p 元素的第一行文本

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    p:first-line
      {
      color:#ff0000;
      font-variant:small-caps;
      }
    // "first-line" 伪元素只能用于块级元素。
    // 块级元素？DIV P ...
    // 行内元素？span img ...
    // 区别是
    // 应用于 "first-line" 伪元素属性：font color background line-height word-spacing(字间距) letter-spacing(字母间距)

  • eg:2 :first-letter 向文本的首字母设置特殊样式

    1
    2
    3
    4
    5
    6
    7
    p:first-letter
      {
      color:#ff0000;
      font-size:20px;
      }
    // "first-letter" 伪元素只能用于块级元素。
    //属性可应用于 "first-letter" 伪元素：font color background margin padding border line-height

  • eg:3 :before 伪元素可以在元素的内容前面插入新内容。
    在元素内容的最前面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。这个点在我们这个例子里会用到，稍微重点聊一下：
    content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容(PS:本次应用的是content插入无内容的行内元素来进行线条的绘制)
    点击这里查看：关于content的一篇文章

说点相关的还有伪类，对应的语法：

1
selector : pseudo-class {property: value}

应用常见是我们的a元素：

1
2
3
4
a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

顺序一定要是l-v-h-a，否则可能不生效；记忆的方法两个单词：l-o-v-e，ha-t-e。
伪类可以与 CSS 类配合使用：

1
2
3
a.red : visited {color: #FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
//链接被访问过，那么它将显示为红色。

另外还有伪类比如:first-child ，简单举几个例子：

  • eg:1,选择器匹配作为任何元素的第一个子元素的 p 元素：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <html>
    <head>
    <style type="text/css">
    p:first-child {
      color: red;
      }
    </style>
    </head>

    <body>
    <p>some text</p>
    <p>some text</p>
    </body>
    </html>

  • eg:2 选择器匹配所有 p 元素中的第一个 i 元素：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <html>
    <head>
    <style type="text/css">
    p > i:first-child {
      font-weight:bold;
      }
    </style>
    </head>

    <body>
    <p>some <i>text</i>. some <i>text</i>.</p>
    <p>some <i>text</i>. some <i>text</i>.</p>
    </body>
    </html>

  • eg：3选择器匹配所有作为元素的第一个子元素的 p 元素中的所有 i 元素：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <html>
    <head>
    <style type="text/css">
    p:first-child i {
      color:blue;
      }
    </style>
    </head>

    <body>
    <p>some <i>text</i>. some <i>text</i>.</p>
    <p>some <i>text</i>. some <i>text</i>.</p>
    </body>
    </html>

此外还有 :focus元素获得焦点时向元素添加特殊的样式等。
下面是大脑袋的html部分：

1
2
3
4
5
6
7
8
9
10
11
<!-- head part -->
<header class="pet_head">
  <!-- eyes -->
  <div class="left_eye"></div>
  <div class="right_eye"></div>
  <!-- mustache  -->
  <div class="left_mustache"></div>
  <div class="right_mustache"></div>
  <!-- mouth -->
  <div class="mouth"></div>
</header>

开始实现的css：
1.脑袋跟眼睛和鼻子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
/* pet_head */
.pet_head{
  margin: 0 auto;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 2px solid #000;
  position: relative;
  background: linear-gradient(45deg,#095469,#095469,#0EAFD9,#0EAFD9,#0EAFD9,#0EB7E2,#0BBCE8, #82DEF7,#82DEF7)
}
/*
这里大家看到了跟以往看到的一点点不同，background
一般我们用这个属性添加背景图、背景色等，这里我们用到的是css3的一个线性渐变属性：
CSS3 Gradient 分为 linear-gradient（线性渐变）和 radial-gradient（径向渐变）;
[linear-gradient介绍](http://blog.csdn.net/she_rryn/article/details/50454153);
注意在不同浏览器下的兼容性;
*/
.pet_head::after{
  position: absolute;
  bottom: 6px;
  left: 25px;
  width: 250px;
  height: 200px;
  border-radius: 50%;
  border: 2px solid #000;
  content: '';
  background: #fff;
}
.pet_head .left_eye,.pet_head .right_eye{
  width: 60px;
  height: 78px;
  position: absolute;
  top: 40px;
  z-index: 1;
  background: #fff;
  border: 2px solid #000;
  border-radius: 46%;
}
.pet_head .left_eye{
  left: 84px;
}
.pet_head .left_eye::before,
.pet_head .right_eye::before{
  content: '';
  width: 18px;
  height: 18px;
  position: absolute;
  bottom: 18px;
  background: #000;
  border-radius: 50%;
}
.pet_head .left_eye::before{
  right: 10px;
}
.pet_head .right_eye{
  right: 90px;
}
.pet_head .right_eye::before{
  left: 10px;
}
.pet_head .left_eye::after{
  content: '';
  width: 25px;
  height: 25px;
  position: absolute;
  top: 68px;
  left: 46px;
  background: red;
  border: 2px solid #000;
  border-radius: 50%;
}

2.同时两边的胡子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/* mustache */
.pet_head .left_mustache,.pet_head .right_mustache{
  position: absolute;
  bottom: 130px;
  width: 60px;
  height: 2px;
  background: #000;
  z-index: 1;
}
.pet_head .left_mustache{
  left: 58px;
}
.pet_head .left_mustache::before,
.pet_head .left_mustache::after,
.pet_head .right_mustache::before,
.pet_head .right_mustache::after{
  content: '';
  width: 60px;
  height: 2px;
  position: absolute;
  left: 0px;
  background: #000;
  z-index: 1;
}
.pet_head .left_mustache::before{
  bottom: 10px;
  transform-origin: right;
  transform: rotate(30deg);/*顺时针*/
}
/*
这里有个transform属性
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转(rotate)、缩放(scale)、移动(translateX)或倾斜(skewY)。
[transform](http://www.w3school.com.cn/cssref/pr_transform.asp);
*/
.pet_head .left_mustache::after{
  bottom: -10px;
  transform-origin: right;
  transform: rotate(-30deg);
}
/*右侧胡须处理*/
.pet_head .right_mustache{
  right: 58px;
}
.pet_head .right_mustache::before{
  top: 10px;
  transform-origin: left;
  transform: rotate(30deg);
}
.pet_head .right_mustache::after{
  top: -10px;
  transform-origin: left;
  transform: rotate(-30deg);
}

3.嘴巴跟笑脸

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* mouth */
.pet_head .mouth{
  width: 2px;
  height: 118px;
  background: #000;
  position: absolute;
  bottom: 45px;
  left: 146px;
  z-index: 1;
}
.pet_head .mouth::after{
  content: '';
  width: 150px;
  height: 80px;
  position: absolute;
  bottom: -2px;
  left: -75px;
  z-index: 1;
  border-bottom: 2px solid #000;
  border-radius: 50%;
}

铃铛
1
2
3
4
5
<div class="pet_collar">
  <div class="pet_bell">
    <div class="pet_bell_wig"></div>
  </div>
</div>

上面是实现红色的领带跟小铃铛的html代码。来看我们对应的css部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
/* collar */
.pet_collar{
      position: relative;
      width: 280px;
      height: 24px;
      background: red;
      margin: -28px  auto 0px auto;
      border: 2px solid #000;
      border-radius: 10px;
      z-index: 5;
}
.pet_bell{
      position: absolute;
      top: 15px;
      left: 120px;
      width: 40px;
      height: 40px;
      background: #CBC10A;
      border-radius: 50%;
      border: 2px solid #000;
}
.pet_bell::before,.pet_bell::after{
      content: '';
      background: #000;
      width: 38px;
      height: 2px;
      position: absolute;
      top: 10px;
}
.pet_bell::after{
      width: 40px;
      top: 14px;
}
.pet_bell_wig{
      position: absolute;
      bottom: 8px;
      left: 12px;
      background: #000;
      width: 16px;
      height: 12px;
      border-radius: 50%;
}
.pet_bell_wig::after{
      content: '';
      background: #000;
      width: 4px;
      height: 10px;
      position: absolute;
      bottom: -8px;
      left: 6px;
}

身体部分

肚子部分我们分成了这么几个部分：蓝胖子的大肚子，一双肥胖的双手，两条大粗腿跟一双44尺码的脚。

1
2
3
4
5
6
7
8
9
10
11
12
<!-- pet_body -->
<section class="pet_body">
  <!-- pet_belly -->
  <div class="pet_belly"></div>
  <!-- pet_waist -->
  <div class="pet_waist"></div>
  <!-- pet_arms -->
  <div class="pet_arms">
    <div class="left_arm"></div>
    <div class="right_arm"></div>
  </div>
</section>

下面在进一步细分:

肚子
1
2
<!-- pet_belly -->
<div class="pet_belly"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/*先给个父元素相对定位，方便我们把蓝胖子的肚子、双手、膝盖放到合适的位置*/
/* pet_body */
.pet_body{
  position: relative;
  width: 240px;
  height: 200px;
  margin: 0 auto;
}
/*肚子*/
.pet_belly{
      width: 240px;
      height: 180px;
      background: #fff;
      margin: 0 auto;
      border: 2px solid #000;
      border-radius: 48%;
      position: absolute;
      top: -10px;
      z-index: 4;
}
/*使用before after*/
.pet_belly::before{
      content: '';
      width: 130px;
      height: 130px;
      border: 2px solid #000;
      border-radius: 50%;
      position: absolute;
      top: 10px;
      left: 55px;
      border-top-color: transparent;
      border-right-color: transparent;
      transform: rotate(-45deg);
}
.pet_belly::after{
      content: '';
      width: 134px;
      height: 2px;
      background: #000;
      position: absolute;
      top: 76px;
      left: 55px;
}
左右手
1
2
3
4
5
<!-- pet_arms -->
<div class="pet_arms">
  <div class="left_arm"></div>
  <div class="right_arm"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
/* pet_arms */
/*同样的两只手同时画  给出大体位置*/
.pet_arms{
      position: absolute;
      top: 0;
      left: -20px;
      background: linear-gradient(85deg,#0C90B3,#0C90B3,#0EAFD9,#0DBAE5,#0DBAE5);
      width: 280px;
      height: 60px;
}
.left_arm,.right_arm{
      width: 100px;
      height: 50px;
      background: #0C90B3;
      position: absolute;
      border: 2px solid #000;
      z-index: 1;
}
/*拆分*/
.left_arm{
      left: -60px;
      top: 20px;
      border-right: none;
      transform: rotate(-45deg);
}
.right_arm{
      right: -60px;
      top: 20px;
      background: #0DBAE5;
      border-left: none;
      transform: rotate(45deg);
}
.right_arm::before{
      left: 84px;
      bottom: -14px;
}
/*两个手掌*/
.left_arm::before,.right_arm::before{
      content: '';
      width: 80px;
      height: 80px;
      border-radius: 50%;
      border: 2px solid #000;
      background: #fff;
      position: absolute;
}
.left_arm::before{
      right: 84px;
      bottom: -14px;
}
膝盖
1
2
<!-- pet_waist -->
<div class="pet_waist"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
/* pet_waist */
.pet_waist{
      position: absolute;
      top: 45px;
      height: 180px;
      width: 276px;
      margin-left: -20px;
      background: linear-gradient(45deg,#0C90B3,#0C90B3,#0C90B3,#0EAFD9,#0EB7E2,#0BBCE8);
      border-left: 2px solid #000;
      border-right: 2px solid #000;
      border-bottom: 2px solid #000;
      z-index: 3;
}
双脚
1
2
3
4
5
<!-- pet_footer -->
<div class="pet_footer">
  <div class="left_foot"></div>
  <div class="right_foot"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* pet_footer */
.pet_footer{
      position: relative;
      top: 22px;
      width: 300px;
      margin: 0 auto;
      z-index: 5;
}
.left_foot,.right_foot{
      width: 146px;
      height: 40px;
      background: #fff;
      border: 2px solid #000;
      border-radius: 40px;
      position: absolute;
}
.right_foot{
      left: 146px;
      margin-left: 10px;
}

最后，少点东西：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*使用伪元素after或者before好让蓝胖子的腿没那么粗*/
.pet_waist::after{
      content: '';
      width: 30px;
      height: 30px;
      background: #fff;
      border: 2px solid #000;
      border-radius: 50%;
      border-top: none;
      border-right: none;
      transform: rotate(135deg);
      position: absolute;
      bottom: -15px;
      left: 50%;
      margin-left: -15px;
}

Tips

这次涉及到的此时CSS3的知识点有：

before,after –> 纯css3小demo演示 ⬇️
content:””;
background:linear-gradient();
transform:rotate();

更多css3小demo

（本文完）