使用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
10p: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
7p:first-letter
{
color:#ff0000;
font-size:20px;
}
// "first-letter" 伪元素只能用于块级元素。
//属性可应用于 "first-letter" 伪元素:font color background margin padding border line-heighteg:3
:before
伪元素可以在元素的内容前面插入新内容。
在元素内容的最前面插入生成内容。默认地,这个伪元素是行内元素,不过可以使用属性 display 改变这一点。这个点在我们这个例子里会用到,稍微重点聊一下:
content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容(PS:本次应用的是content插入无内容的行内元素来进行线条的绘制)
点击这里查看:关于content的一篇文章
说点相关的还有伪类,对应的语法:1
selector : pseudo-class {property: value}
应用常见是我们的a元素:1
2
3
4a: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
3a.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 | <div class="pet_collar"> |
上面是实现红色的领带跟小铃铛的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 | <!-- pet_belly --> |
1 | /*先给个父元素相对定位,方便我们把蓝胖子的肚子、双手、膝盖放到合适的位置*/ |
左右手
1 | <!-- pet_arms --> |
1 | /* pet_arms */ |
膝盖
1 | <!-- pet_waist --> |
1 | /* pet_waist */ |
双脚
1 | <!-- pet_footer --> |
1 | /* pet_footer */ |
最后,少点东西: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();
(本文完)