利用CSS3画出一个叮当猫,纯CSS3画出小黄人并促成动画效果

纯CSS3画出小黄人并落到实处动画效果

2015/07/29 · CSS · 2
评论 ·
CSS3,
小黄人

原文出处: 郭锦荣   

前言

前二日我刚公布了一篇CSS3落成小黄人动画的博客,可是落到实处的CSS3动画是按照自己在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出须求达成动画的片段,最后才水到渠成的卡通效果。但是,其实自己的初衷是想体验一下用图片做动画的赶脚,不过找不到素材,才无奈用了最笨的法门来满意自己的必要,本想勉强能看就行了。然则呢,仍旧抵不住自己心灵的不偏不倚,于是乎,用了一个夜晚用CSS3画出了小黄人再落到实处类似的卡通效果。

正题

OK,大家看一下上面两张图有啥样两样:

亚洲必赢官网 1亚洲必赢官网 2

理所当然,很三人会说,显明轻重不一,嘴巴,头发也是不雷同的。不过实际最大的两样是,用一个形象一点的事例就是:那是多少个男女,第三个是从超市货架上拿的,其它一个是本身要好生的。怎么生呢?——用CSS3!

那么生下来得会动啊,不然就崩溃了,所以,我就多拍了几个,就改成那样子了:

亚洲必赢官网 3

哪些?即便动作动画依然稍微神似,但人类智慧地大脑仍是可以看得出啥意思的吗!明天就让大家一同读书怎么生出一个小黄人来。

首先,仍然平昔把HTML结构放出去给我们打量打量:

XHTML

<div class=”wrapper”><!– 容器 –> <div
class=”littleH”><!– 小黄人 –> <div
class=”bodyH”><!– 身体 –> <div class=”trousers”><!–
裤子 –> <div class=”condoleBelt”><!– 吊带 –> <div
class=”left”></div> <div class=”right”></div>
</div> <div class=”trousers_top”></div><!–
裤子卓绝的矩形部分 –> <div class=”pocket”></div><!–
裤袋 –> <!– 三条线 –> <span
class=”line_left”></span> <span
class=”line_right”></span> <span
class=”line_bottom”></span> </div> </div> <div
class=”hair”><!– 头发 –> <span
class=”left_hair_one”></span> <span
class=”left_hair_two”></span> </div> <div
class=”eyes”><!– 眼睛 –> <div class=”leftEye”><!–
左眼 –> <div class=”left_blackEye”> <div
class=”left_white”></div> </div> </div> <div
class=”rightEye”><!– 右眼 –> <div
class=”right_blackEye”> <div class=”right_white”></div>
</div> </div> </div> <div class=”mouse”><!–
嘴巴 –> <div class=”mouse_shape”></div> </div>
<div class=”hands”><!– 双手 –> <div
class=”leftHand”></div> <div
class=”rightHand”></div> </div> <div
class=”feet”><!– 双脚 –> <div
class=”left_foot”></div> <div
class=”right_foot”></div> </div> <div
class=”groundShadow”></div><!– 脚底阴影 –> </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
<div class="wrapper"><!– 容器 –>
        <div class="littleH"><!– 小黄人 –>
            <div class="bodyH"><!– 身体 –>
                <div class="trousers"><!– 裤子 –>
                    <div class="condoleBelt"><!– 吊带 –>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                    <div class="trousers_top"></div><!– 裤子突出的矩形部分 –>
                    <div class="pocket"></div><!– 裤袋 –>
                    <!– 三条线 –>
                    <span class="line_left"></span>
                    <span class="line_right"></span>
                    <span class="line_bottom"></span>
                </div>
            </div>
            <div class="hair"><!– 头发 –>
                <span class="left_hair_one"></span>
                <span class="left_hair_two"></span>
            </div>
            <div class="eyes"><!– 眼睛 –>
                <div class="leftEye"><!– 左眼 –>
                    <div class="left_blackEye">
                        <div class="left_white"></div>
                    </div>
                </div>
                <div class="rightEye"><!– 右眼 –>
                    <div class="right_blackEye">
                        <div class="right_white"></div>
                    </div>
                </div>
            </div>
            <div class="mouse"><!– 嘴巴 –>
                <div class="mouse_shape"></div>
            </div>
            <div class="hands"><!– 双手 –>
                <div class="leftHand"></div>
                <div class="rightHand"></div>
            </div>
            <div class="feet"><!– 双脚 –>
                <div class="left_foot"></div>
                <div class="right_foot"></div>
            </div>
            <div class="groundShadow"></div><!– 脚底阴影 –>
        </div>
    </div>

好的,每一处我都标志了它的用处,我们可以稍微领悟一下,在头脑里有一个光景的模型或者层次结构。

接下去就是猛料了。。。我将分步讲解,一步一步已毕:

首先对容器和全部做一些简约的体裁设置:

CSS

body{ margin: 0; padding:0; } .wrapper{ width: 300px; margin:100px auto;
} .litteH{ position: relative; } .bodyH{ position: absolute; width:
240px; height: 400px; border:5px solid #000; border-radius: 115px;
background: rgb(249,217,70); overflow: hidden; z-index: 2; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
body{
    margin: 0;
    padding:0;
}
.wrapper{
    width: 300px;
    margin:100px auto;
}
.litteH{
    position: relative;
}
.bodyH{
    position: absolute;
    width: 240px;
    height: 400px;
    border:5px solid #000;
    border-radius: 115px;
    background: rgb(249,217,70);
    overflow: hidden;
    z-index: 2;
}

里面.bodyH首要就是绘制小黄人的肉体,肉体的比例很要紧,现在运行看一下成效:

亚洲必赢官网 4

OK,身体已经有了,现在不久给它穿个裤子吧!

CSS

.bodyH .condoleBelt{ position: absolute; } .bodyH .trousers{ position:
absolute; bottom: 0; width: 100%; height: 100px; border-top: 6px solid
#000; background: rgb(32,116,160); } .trousers_top{ width: 160px;
height: 60px; border:6px solid #000; border-bottom: none;
border-radius: 0 0 5px 5px; background: rgb(32,116,160); position:
absolute; bottom: 100px; left:34px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.bodyH .condoleBelt{
    position: absolute;
}
.bodyH .trousers{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    border-top: 6px solid #000;
    background: rgb(32,116,160);
}
.trousers_top{
    width: 160px;
    height: 60px;
    border:6px solid #000;
    border-bottom: none;
    border-radius: 0 0 5px 5px;
    background: rgb(32,116,160);
    position: absolute;
    bottom: 100px;
    left:34px;
}

其中.trousers_top就是矩形部分,那么穿完裤子是如何体统的呢?

亚洲必赢官网 5

现在怎么看都像一颗胶囊,不行,赶紧修饰修饰,给它一个吊带,不然裤子会掉吧:

CSS

.bodyH .condoleBelt .left, .bodyH .condoleBelt .right{ width: 100px;
height: 16px; border:5px solid #000; background: rgb(32,116,160);
position: absolute; top:-90px; left:-35px; z-index: 2;
-webkit-transform:rotate(45deg); } .bodyH .condoleBelt .left{ top:-88px;
left:165px; -webkit-transform:rotate(-45deg); } .bodyH .condoleBelt
.left:after, .bodyH .condoleBelt .right:after{ content: ”; width: 8px;
height: 8px; border-radius: 50%; background: #000; position: absolute;
top:4px; left:88px; } .bodyH .condoleBelt .left:after{ left:5px; }

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
.bodyH .condoleBelt .left,
.bodyH .condoleBelt .right{
    width: 100px;
    height: 16px;
    border:5px solid #000;
    background: rgb(32,116,160);
    position: absolute;
    top:-90px;
    left:-35px;
    z-index: 2;
    -webkit-transform:rotate(45deg);
}
.bodyH .condoleBelt .left{
    top:-88px;
    left:165px;
    -webkit-transform:rotate(-45deg);
}
.bodyH .condoleBelt .left:after,
.bodyH .condoleBelt .right:after{
    content: ”;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #000;
    position: absolute;
    top:4px;
    left:88px;
}
 
.bodyH .condoleBelt .left:after{
    left:5px;
}

这一块主要就是贯彻几个吊带,左右各一条,然后自己利用:after伪元平素落实吊带上的小黑点:

亚洲必赢官网 6

哎,开始有模有样了,接下去大家一举把裤袋和一下修饰的边边给落到实处了:

CSS

.pocket{ width: 60px; height: 45px; border:6px solid #000;
border-radius: 0px 0px 25px 25px; position: absolute; bottom:65px;
left:84px; } .line_right{ width: 30px; height: 30px;
border-bottom-left-radius: 100px; border-bottom:6px solid #000;
border-left:6px solid #000; position: absolute; left: 0; bottom:60px;
-webkit-transform:rotate(-75deg); } .line_left{ width: 30px; height:
30px; border-bottom-right-radius: 100px; border-bottom:6px solid #000;
border-right:6px solid #000; position: absolute; right: 0; bottom:63px;
-webkit-transform:rotate(75deg); } .line_bottom{ height: 40px;
border:3px solid #000; border-radius: 3px; position: absolute;
left:118px; bottom: 0px; }

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
.pocket{
    width: 60px;
    height: 45px;
    border:6px solid #000;
    border-radius: 0px 0px 25px 25px;
    position: absolute;
    bottom:65px;
    left:84px;
}
.line_right{
    width: 30px;
    height: 30px;
    border-bottom-left-radius: 100px;
    border-bottom:6px solid #000;
    border-left:6px solid #000;
    position: absolute;
    left: 0;
    bottom:60px;
    -webkit-transform:rotate(-75deg);
}
.line_left{
    width: 30px;
    height: 30px;
    border-bottom-right-radius: 100px;
    border-bottom:6px solid #000;
    border-right:6px solid #000;
    position: absolute;
    right: 0;
    bottom:63px;
    -webkit-transform:rotate(75deg);
}
.line_bottom{
    height: 40px;
    border:3px solid #000;
    border-radius: 3px;
    position: absolute;
    left:118px;
    bottom: 0px;
}

先看效果图:

亚洲必赢官网 7

OK,七个注意点说一下:

1.我把裤子放在身子内部,然后给.bodyH添加overflow:hidden,那样大家就不用去多虑溢出咋做,而且很自在就能兑现裤子的作用;

2.足以观察裤子两边有两条有弧度的曲线段,我是因而给矩形某一个角达成圆角效果,然后只设置与那个角相邻的两条边的边框样式,然后旋转一下角度就落实这几个效应了,当然只好兑现简单一点的功用。

好的,大家后续,接下去先达成以下眼睛有些吗:

CSS

.eyes{ position: relative; z-index: 3; } .eyes .leftEye,.eyes .rightEye{
width: 85px; height: 85px; border-radius: 50%; border:6px solid #000;
background: #fff; position: absolute; top:60px; left: 27px; } .eyes
.leftEye{ left: 124px; } .eyes .leftEye .left_blackEye, .eyes .rightEye
.right_blackEye{ width: 40px; height: 40px; border-radius: 50%;
background: #000; position: absolute; top:24px; left:22px; } .eyes
.leftEye .left_blackEye .left_white, .eyes .rightEye .right_blackEye
.right_white{ width: 20px; height: 20px; border-radius: 50%;
background: #fff; position: absolute; top:7px; left:17px; } .eyes
.leftEye .left_blackEye .left_white{ top:4px; left:17px; } .eyes
.leftEye:after, .eyes .rightEye:after{ content: ”; width: 28px; height:
18px; background: #000; position: absolute; left:-30px; top:37px;
-webkit-transform:skewX(20deg) rotate(7deg); } .eyes .leftEye:after{
left:89px; top:37px; -webkit-transform:skewX(-20deg) rotate(-7deg); }

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
.eyes{
    position: relative;
    z-index: 3;
}
.eyes .leftEye,.eyes .rightEye{
    width: 85px;
    height: 85px;
    border-radius: 50%;
    border:6px solid #000;
    background: #fff;
    position: absolute;
    top:60px;
    left: 27px;
}
.eyes .leftEye{
    left: 124px;
}
.eyes .leftEye .left_blackEye,
.eyes .rightEye .right_blackEye{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #000;
    position: absolute;
    top:24px;
    left:22px;
}
.eyes .leftEye .left_blackEye .left_white,
.eyes .rightEye .right_blackEye .right_white{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top:7px;
    left:17px;
}
.eyes .leftEye .left_blackEye .left_white{
    top:4px;
    left:17px;
}
.eyes .leftEye:after,
.eyes .rightEye:after{
    content: ”;
    width: 28px;
    height: 18px;
    background: #000;
    position: absolute;
    left:-30px;
    top:37px;
    -webkit-transform:skewX(20deg) rotate(7deg);
}
.eyes .leftEye:after{
    left:89px;
    top:37px;
    -webkit-transform:skewX(-20deg) rotate(-7deg);
}

肉眼有些或者挺好贯彻的,先画眼镜,然后黑眼珠,再画白点,最终我才画的眼镜框,眼睛框我是用:after伪元素达成的。效果图如下:

亚洲必赢官网 8

嘴巴是最可疑我的,但仍旧最终仍是可以促成:

CSS

.mouse{ position: relative; } .mouse .mouse_shape{ width: 55px; height:
35px; border:5px solid #000; border-bottom-left-radius: 30px;
background: #fff; position: absolute; top:175px; left:98px; z-index: 3;
-webkit-transform:rotate(-35deg); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.mouse{
    position: relative;
}
.mouse .mouse_shape{
    width: 55px;
    height: 35px;
    border:5px solid #000;
    border-bottom-left-radius: 30px;
    background: #fff;
    position: absolute;
    top:175px;
    left:98px;
    z-index: 3;
    -webkit-transform:rotate(-35deg);
}

率先也是经过矩形其中一个角完毕圆角来效仿嘴巴形状,再加以旋转:

亚洲必赢官网 9

结果是如此的,那么想要达到大家预料的功力,就须要把上半有的给遮掉,所以自己用:after伪元一向贯彻遮罩效果:

CSS

.mouse .mouse_shape:after{ content: ”; width: 70px; height: 32px;
border-bottom:5px solid #000; border-radius:35px 26px 5px 5px;
background: red; position: absolute; top:-16px; left:3px;
-webkit-transform:rotate(34deg);}

1
2
3
4
5
6
7
8
9
10
11
.mouse .mouse_shape:after{
    content: ”;
    width: 70px;
    height: 32px;
    border-bottom:5px solid #000;
    border-radius:35px 26px 5px 5px;
    background: red;
    position: absolute;
    top:-16px;
    left:3px;
    -webkit-transform:rotate(34deg);}

本条地点就必要渐渐调到合适的职位,模拟图如下:

亚洲必赢官网 10

新民主主义革命部分就是遮罩了,也是一个矩形,设置了底部框,达成和嘴巴下半部分形成闭合效果,现在我们就可以把颜色改成肤色就行了:

CSS

.mouse .mouse_shape:after{ content: ”; width: 70px; height: 32px;
border-bottom:5px solid #000; border-radius:35px 26px 5px 5px;
background: rgb(249,217,70); position: absolute; top:-16px; left:3px;
-webkit-transform:rotate(34deg); -webkit-animation: mouse_mask 5s
ease-in-out infinite; }

1
2
3
4
5
6
7
8
9
10
11
12
13
.mouse .mouse_shape:after{
    content: ”;
    width: 70px;
    height: 32px;
    border-bottom:5px solid #000;
    border-radius:35px 26px 5px 5px;
    background: rgb(249,217,70);
    position: absolute;
    top:-16px;
    left:3px;
    -webkit-transform:rotate(34deg);
    -webkit-animation: mouse_mask 5s ease-in-out infinite;
}

功用图如下:

亚洲必赢官网 11

接下去贯彻双手部分,这一片段简单,就是四个圆角矩形,旋转了角度,然后层级低于身体的层级就行,然后再通过:after伪元素落成胳膊关节处就搞定了。

CSS

.hands{ position: relative; } .hands .leftHand, .hands .rightHand{
width: 80px; height: 80px; border:6px solid #000; border-radius: 25px;
background: rgb(249,217,70); position: absolute; top:220px; left:-23px;
-webkit-transform:rotate(40deg); } .hands .leftHand{ left:182px;
top:220px; -webkit-transform:rotate(-40deg); } .hands .leftHand:after,
.hands .rightHand:after{ content: ”; width: 6px; border:3px solid
#000; border-radius: 3px; position: absolute; left:13px; top:50px;
-webkit-transform:rotate(90deg); } .hands .leftHand:after{ left:53px;
top:50px; -webkit-transform:rotate(-90deg); }

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
.hands{
    position: relative;
}
.hands .leftHand,
.hands .rightHand{
    width: 80px;
    height: 80px;
    border:6px solid #000;
    border-radius: 25px;
    background: rgb(249,217,70);
    position: absolute;
    top:220px;
    left:-23px;
    -webkit-transform:rotate(40deg);
}
.hands .leftHand{
    left:182px;
    top:220px;
    -webkit-transform:rotate(-40deg);
}
.hands .leftHand:after,
.hands .rightHand:after{
    content: ”;
    width: 6px;
    border:3px solid #000;
    border-radius: 3px;
    position: absolute;
    left:13px;
    top:50px;
    -webkit-transform:rotate(90deg);
}
 
.hands .leftHand:after{
    left:53px;
    top:50px;
    -webkit-transform:rotate(-90deg);
}

作用图如下:

亚洲必赢官网 12

再接下去就是双脚的局地了,紧要就是鞋面的规划,我是通过一个矩形,然后设置不一致的圆角值,加上一点点的团团转来效仿的,这一块的话,怎么办自己都觉着不是很像,所以末了大多我就让步了。

CSS

.feet{ position: relative; } .feet .left_foot, .feet .right_foot{
width: 36px; height: 50px; border-bottom-right-radius: 6px;
border-bottom-left-radius: 9px; background: #000; position: absolute;
top: 406px; left:88px; -webkit-transform-origin: right top; } .feet
.left_foot{ border-bottom-right-radius: 9px; border-bottom-left-radius:
6px; left:130px; -webkit-transform-origin: left top; } .feet
.left_foot:after, .feet .right_foot:after{ content: ”; width: 60px;
height: 35px; border-radius: 20px 10px 21px 15px; background: #000;
position: absolute; left:-36px; top:14.4px;
-webkit-transform:rotate(5deg); } .feet .left_foot:after{
border-radius: 10px 20px 15px 21px; left:13px;
-webkit-transform:rotate(-5deg); }

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
.feet{
    position: relative;
}
.feet .left_foot,
.feet .right_foot{
    width: 36px;
    height: 50px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 9px;
    background: #000;
    position: absolute;
    top: 406px;
    left:88px;
    -webkit-transform-origin: right top;
}
.feet .left_foot{
    border-bottom-right-radius: 9px;
    border-bottom-left-radius: 6px;
    left:130px;
    -webkit-transform-origin: left top;
}
.feet .left_foot:after,
.feet .right_foot:after{
    content: ”;
    width: 60px;
    height: 35px;
    border-radius: 20px 10px 21px 15px;
    background: #000;
    position: absolute;
    left:-36px;
    top:14.4px;
    -webkit-transform:rotate(5deg);
}
.feet .left_foot:after{
    border-radius: 10px 20px 15px 21px;
    left:13px;
    -webkit-transform:rotate(-5deg);
}

效能图如下:

亚洲必赢官网 13

理所当然是不想画头发的,感觉怪难的,最终尝试了一晃,仍能出个规范,那就添加上去呢。原理跟裤子左右两边的贯彻原理是一样的,只是参数值差别罢了,大家参考代码商量一下:

CSS

.hair{ position: relative; } .left_hair_one{ width: 130px; height:
100px; border-radius: 50%; border-top:8px solid #000; position:
absolute; left:17px; top:-17px; -webkit-transform:rotate(27deg); }
.left_hair_two{ width: 80px; height: 80px; border-radius: 50%;
border-top:6px solid #000; position: absolute; left:45px; top:-10px;
-webkit-transform:rotate(15deg); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.hair{
    position: relative;
}
.left_hair_one{
    width: 130px;
    height: 100px;
    border-radius: 50%;
    border-top:8px solid #000;
    position: absolute;
    left:17px;
    top:-17px;
    -webkit-transform:rotate(27deg);
}
.left_hair_two{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border-top:6px solid #000;
    position: absolute;
    left:45px;
    top:-10px;
    -webkit-transform:rotate(15deg);
}

补偿脚底阴影部分:

CSS

.groundShadow{ width: 200px; height: 2px; border-radius: 50%;
background: rgba(0,0,0,0.3); box-shadow: 0 0 2px 4px rgba(0,0,0,0.3);
position: relative; top: 455px; left:25px; }

1
2
3
4
5
6
7
8
9
10
.groundShadow{
    width: 200px;
    height: 2px;
    border-radius: 50%;
    background: rgba(0,0,0,0.3);
    box-shadow: 0 0 2px 4px rgba(0,0,0,0.3);
    position: relative;
    top: 455px;
    left:25px;
}

最终就是早期的效果了:

亚洲必赢官网 14

那会儿大家莫不会问:然后呢?不是还会动的呢?

毋庸置疑,那里我就大致讲一下已毕的笔触吧:

1.头发:头发我想达成的是被小风轻轻地吹起来,然后火速就塌下去,所以吹起和下塌分配的小运很关键;

2.双眼:眼睛我着想的风貌是小黄人在空闲地走动,然后不时左右看一下两边的山山水水,所以眼睛打转很悠哉,所以分配的时光足以稍微长一点点;

3.嘴巴:让嘴巴动起来实在比较难,因为要动的话,遮罩也得实时跟着变动,而且不可以露馅,所以最后已毕的是当它往左侧看了一下自此卖了一晃萌;

4.四只手和双脚:这一部分真的很难传神,本来脚就不是正规的行动状态,所以只能按Chaplin老曾祖父的行路格局模拟一下,而且左底角动作是连接完成而不是一头达成。双手的话,我是简约模拟人在走路时有摆手的自然惯性,而且是底角配右手,底角配左手。考虑到它的双手是位于背后的,所以我的忽悠幅度设置为万分小,有效果但不鲜明。

OK,我就一向把动画代码放上来吧:

CSS

.left_hair_one{ -webkit-animation: lefthair 2s ease-in-out infinite; }
@-webkit-keyframes lefthair{ 0%,25%,31%,100%{ } 30%{ -webkit-transform:
rotate(31deg) translate3d(-3px,-1px,0); } } .eyes .leftEye
.left_blackEye, .eyes .rightEye .right_blackEye{ -webkit-animation:
blackeye 5s ease-in infinite; } @-webkit-keyframes blackeye{
0%,20%,50%,70%,100%{ -webkit-transform: translateX(0px); } 30%,40%{
-webkit-transform: translateX(15px); } 80%,90%{ -webkit-transform:
translateX(-15px); } } .eyes .leftEye .left_blackEye .left_white,
.eyes .rightEye .right_blackEye .right_white{ -webkit-animation:
whiteeye 5s ease-in-out infinite; } @-webkit-keyframes whiteeye{
0%,20%,50%,70%,100%{ -webkit-transform: translateX(0px); } 30%,40%{
-webkit-transform: translate3d(3px,4px,0); } 80%,90%{ -webkit-transform:
translate3d(-15px,4px,0); } } .mouse .mouse_shape{ -webkit-animation:
mouse 5s ease-in-out infinite; } @-webkit-keyframes mouse{ 40%,43%{
width: 45px; height: 25px; top:180px; } 0%,35%,48%,100%{ width: 55px;
height: 35px; top:175px; -webkit-transform:rotate(-35deg); } } .mouse
.mouse_shape:after{ -webkit-animation: mouse_mask 5s ease-in-out
infinite; } @-webkit-keyframes mouse_mask{ 40%,43%{ width: 60.5px;
top:-19.3px; left:1.5px; } 0%,35%,48%,100%{ width: 70px; top:-16px;
left:3px; -webkit-transform:rotate(33deg); } } .hands .rightHand{
-webkit-animation:rightHand .8s ease-in-out infinite; }
@-webkit-keyframes rightHand{ 0%,50%,100%{ -webkit-transform:
rotate(40deg); } 30%{ -webkit-transform: rotate(37deg) translateX(1px);
} } .hands .leftHand{ -webkit-animation:leftHand .8s ease-in-out
infinite; } @-webkit-keyframes leftHand{ 0%,50%,100%{ -webkit-transform:
rotate(-40deg); } 80%{ -webkit-transform: rotate(-37deg)
translateX(-1px); } } .feet .right_foot{ -webkit-animation: rightfoot
.8s ease-in-out infinite; } @-webkit-keyframes rightfoot{ 0%,50%,100%{
-webkit-transform: rotate(0deg); } 80%{ -webkit-transform:
rotate(10deg); } } .feet .left_foot{ -webkit-animation: leftfoot .8s
ease-in-out infinite; } @-webkit-keyframes leftfoot{ 0%,50%,100%{
-webkit-transform: rotate(0deg); } 30%{ -webkit-transform:
rotate(-10deg); } }

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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
.left_hair_one{
    -webkit-animation: lefthair 2s ease-in-out infinite;
}
@-webkit-keyframes lefthair{
    0%,25%,31%,100%{
    }
    30%{
        -webkit-transform: rotate(31deg) translate3d(-3px,-1px,0);
    }
}
.eyes .leftEye .left_blackEye,
.eyes .rightEye .right_blackEye{
    -webkit-animation: blackeye 5s ease-in infinite;
}
@-webkit-keyframes blackeye{
    0%,20%,50%,70%,100%{
        -webkit-transform: translateX(0px);
    }
    30%,40%{
        -webkit-transform: translateX(15px);
    }
    80%,90%{
        -webkit-transform: translateX(-15px);
    }
}
.eyes .leftEye .left_blackEye .left_white,
.eyes .rightEye .right_blackEye .right_white{
    -webkit-animation: whiteeye 5s ease-in-out infinite;
}
@-webkit-keyframes whiteeye{
    0%,20%,50%,70%,100%{
        -webkit-transform: translateX(0px);
    }
    30%,40%{
        -webkit-transform: translate3d(3px,4px,0);
    }
    80%,90%{
        -webkit-transform: translate3d(-15px,4px,0);
    }
}
.mouse .mouse_shape{
    -webkit-animation: mouse 5s ease-in-out infinite;
}
@-webkit-keyframes mouse{
    40%,43%{
        width: 45px;
        height: 25px;
        top:180px;
    }
    0%,35%,48%,100%{
        width: 55px;
        height: 35px;
        top:175px;
        -webkit-transform:rotate(-35deg);
    }
}
.mouse .mouse_shape:after{
    -webkit-animation: mouse_mask 5s ease-in-out infinite;
}
@-webkit-keyframes mouse_mask{
    40%,43%{
        width: 60.5px;
        top:-19.3px;
        left:1.5px;
    }
    0%,35%,48%,100%{
        width: 70px;
        top:-16px;
        left:3px;
        -webkit-transform:rotate(33deg);
    }
}
.hands .rightHand{
    -webkit-animation:rightHand .8s ease-in-out infinite;
}
@-webkit-keyframes rightHand{
    0%,50%,100%{
        -webkit-transform: rotate(40deg);
    }
    30%{
        -webkit-transform: rotate(37deg) translateX(1px);
    }
}
.hands .leftHand{
    -webkit-animation:leftHand .8s ease-in-out infinite;
}
@-webkit-keyframes leftHand{
    0%,50%,100%{
        -webkit-transform: rotate(-40deg);
    }
    80%{
        -webkit-transform: rotate(-37deg) translateX(-1px);
    }
}
.feet .right_foot{
    -webkit-animation: rightfoot .8s ease-in-out infinite;
}
@-webkit-keyframes rightfoot{
    0%,50%,100%{
        -webkit-transform: rotate(0deg);
    }
    80%{
        -webkit-transform: rotate(10deg);
    }
}
.feet .left_foot{
    -webkit-animation: leftfoot .8s ease-in-out infinite;
}
@-webkit-keyframes leftfoot{
    0%,50%,100%{
        -webkit-transform: rotate(0deg);
    }
 
    30%{
        -webkit-transform: rotate(-10deg);
    }
}

篇幅相比大,代码看多了会乱,若是以为温馨懒得整理的话,可以一直到自己的github上下载那么些简单又幽默的案例吧:https://github.com/JR93/littleHuang

1 赞 2 收藏 2
评论

亚洲必赢官网 15

CSS3与页面布局学习总括(一)——概要、选用器、特殊性与刻度单位,css3选择器

web前端开发者最最注的情节是多少个:HTML、CSS与JavaScript,他们分别在分化地点发挥协调的听从,HTML完毕页面结构,CSS达成页面的显现与作风,JavaScript达成部分客户端的作用与业务。当然内容与用户资源也是不可能忽视的。尽量不要跨职分范围使用,有点“SRP单一任务”的意趣,如字体大小应该是CSS控制的,就不该选拔HTML标签达成,假诺CSS能缓解的题材尽量不要用JavaScript已毕。

亚洲必赢官网 16

CSS3与页面布局学习笔记(一)——概要、采纳器、特殊性与刻度单位,css3学习笔记

web前端开发者最最注的始末是多个:HTML、CSS与JavaScript,他们各自在差距方面发布团结的功用,HTML落成页面结构,CSS完结页面的显现与风格,JavaScript已毕部分客户端的功用与事务。当然内容与用户资源也是不可能忽视的。尽量不要跨义务范围使用,有点“SRP单一任务”的意味,如字体大小应该是CSS控制的,就不应有使用HTML标签已毕,倘若CSS能一举成功的标题尽量不要用JavaScript完毕。

亚洲必赢官网 17亚洲必赢官网 18

行使CSS3画出一个叮当猫

2015/08/03 · CSS · 1
评论 ·
CSS3

原稿出处: 郭锦荣   

刚上学了那个案例,然后觉得相比较好玩,就磨炼了一晃。然后发现实际也简单,倘若您时常应用PS或者Flash的话,应该就会领悟画个叮当猫是很简单的事,至少自己是那样认为。不过,用CSS3画出来确实是首先次接触,所以很乐意去尝试一下,对于我那种菜鸟,确实是支援广大,至少领会如何去画一个大致的人物形象出来,再加上有的动画效果,就活了,那就更好玩了!OK,发轫在此以前,先把功能图晒一下:

亚洲必赢官网 19

PS:说实话,我觉得挺可爱的,时辰候不时看多呐A梦,突然感觉到很亲密,很天真,眨眼之间间年轻了诸多,哈哈!亚洲必赢官网 20

首先,先把HTML结构搭建好:

XHTML

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

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
72
73
74
75
76
77
78
79
80
81
82
83
84
<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,重如果为了方便 子元素/后代元素进行定位。

CSS

.wrapper{ margin: 50px 0 0 500px; } .doraemon{ position: relative; }

1
2
3
4
5
6
.wrapper{
    margin: 50px 0 0 500px;
}
.doraemon{
    position: relative;
}

头部head的样式,因为叮当猫的头顶不是正圆,所以宽高有某些差错,然后使用border-radius将尾部从矩形变成椭圆形,然后再选择径向渐变从右上角给背景来个放射性渐变,然后在加个影子,使其更有立体感,background:#07bbee;是为了合作低版本浏览器:

CSS

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

1
2
3
4
5
6
7
8
9
10
11
12
.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);
}

看望效果到底什么:

亚洲必赢官网 21

亚洲必赢官网 22 shenmgui ,这么丑,别急,逐渐让它活过来:

利用CSS3画出一个叮当猫,纯CSS3画出小黄人并促成动画效果。CSS

/*脸部*/ .doraemon .face { position: relative;
/*让抱有脸部元素可自由一定*/ z-index: 2; /*脸在头顶背景上边*/ }
/*白色脸底*/ .doraemon .face .white { width: 265px; /*安装宽高*/
height: 195px; border-radius: 150px; position: absolute;
/*开展相对定位*/ top: 75px; left: 25px; background: #fff;
/*此放射渐变也是使脸的左下角暗一些,看上去更实在*/ background:
-webkit-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);
background: -moz-radial-gradient(right top,#fff 75%,#eee 80%,#999
90%,#444); background: –ms-radial-gradient(right top,#fff 75%,#eee
80%,#999 90%,#444); } /*鼻子*/ .doraemon .face .nose{ width:30px;
height:30px; border-radius:15px; background:#c93300; border:2px solid
#000; position:absolute; top:110px; left:140px; z-index:3;
/*鼻头在白色脸底上边*/ } /*鼻头上的高光*/ .doraemon .face .nose
.light { width:10px; height:10px; border-radius: 5px; box-shadow: 19px
8px 5px #fff; /*通过阴影达成高光*/ } /*鼻头下的线*/ .doraemon .face
.nose_line{ width:3px; height:100px; background:#333;
position:absolute; top:143px; left:155px; z-index:3; } /*嘴巴*/
.doraemon .face .mouth{ width:220px; height:400px;
/*因此底部框加上圆角模拟微笑嘴巴*/ border-bottom:3px solid #333;
border-radius:120px; position:absolute; top:-160px; left:45px; }
/*眼睛*/ .doraemon .eyes { position: relative; z-index: 3;
/*肉眼在白色脸底上边*/ } /*肉眼共同的体裁*/ .doraemon .eyes .eye{
width:72px; height:82px; background:#fff; border:2px solid #000;
border-radius:35px 35px; position:absolute; top:40px; } /*眼珠*/
.doraemon .eyes .eye .black{ width:14px; height:14px; background:#000;
border-radius:7px; position:absolute; top:40px; } .doraemon .eyes .left{
left:82px; } .doraemon .eyes .right { left: 156px; } .doraemon .eyes
.eye .bleft { left: 50px; } .doraemon .eyes .eye .bright { left: 7px; }

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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
/*脸部*/
         .doraemon .face {
             position: relative; /*让所有脸部元素可自由定位*/
             z-index: 2;    /*脸在头部背景上面*/
         }
        /*白色脸底*/
        .doraemon .face .white {
            width: 265px;       /*设置宽高*/
            height: 195px;
            border-radius: 150px;
            position: absolute; /*进行绝对定位*/
            top: 75px;
            left: 25px;
            background: #fff;
            /*此放射渐变也是使脸的左下角暗一些,看上去更真实*/
            background: -webkit-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);
            background: -moz-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);
            background: –ms-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);        
         }
        /*鼻子*/
         .doraemon .face .nose{
             width:30px;
             height:30px;
             border-radius:15px;
             background:#c93300;
             border:2px solid #000;
             position:absolute;
             top:110px;
             left:140px;
             z-index:3;   /*鼻子在白色脸底下面*/
         }
        /*鼻子上的高光*/
        .doraemon .face .nose .light {
            width:10px;
            height:10px;
            border-radius: 5px;
            box-shadow: 19px 8px 5px #fff;  /*通过阴影实现高光*/
        }
         /*鼻子下的线*/
         .doraemon .face .nose_line{
             width:3px;
             height:100px;
             background:#333;
             position:absolute;
             top:143px;
             left:155px;
             z-index:3;
         }
         /*嘴巴*/
         .doraemon .face .mouth{
             width:220px;
             height:400px;
             /*通过底边框加上圆角模拟微笑嘴巴*/
             border-bottom:3px solid #333;
             border-radius:120px;
             position:absolute;
             top:-160px;
             left:45px;
         }
         /*眼睛*/
        .doraemon .eyes {
            position: relative;
            z-index: 3; /*眼睛在白色脸底下面*/
        }
        /*眼睛共同的样式*/
        .doraemon .eyes .eye{
            width:72px;
            height:82px;
            background:#fff;
            border:2px solid #000;
            border-radius:35px 35px;
            position:absolute;
            top:40px;
        }
        /*眼珠*/
        .doraemon .eyes .eye .black{
            width:14px;
            height:14px;
            background:#000;
            border-radius:7px;
            position:absolute;
            top:40px;
        }
        .doraemon .eyes .left{
            left:82px;
        }
        .doraemon .eyes .right {
            left: 156px;
        }
        .doraemon .eyes .eye .bleft {
            left: 50px;
        }
 
        .doraemon .eyes .eye .bright {
            left: 7px;
        }

写了这么各样式,结果是何等的吧:

亚洲必赢官网 23

亚洲必赢官网 24 怎么看都认为别扭,哦!还差胡须须和白色脸底的边框呢,咱给补上:

CSS

/*胡须背景,首要用来挡住嘴巴的一局地,不要显得太长*/ .doraemon
.whiskers{ width:220px; height:80px; background:#fff;
border-radius:15px; position:absolute; top:120px; left:45px; z-index:2;
/*在鼻子和眼睛下边*/ } /*负有胡子的公用样式*/ .doraemon .whiskers
.whisker { width: 60px; height: 2px; background: #333; position:
absolute; z-index: 2; } /*右上胡子*/ .doraemon .whiskers .rTop { left:
165px; top: 25px; } /*右中胡子*/ .doraemon .whiskers .rMiddle { left:
167px; top: 45px; } /*右下胡子*/ .doraemon .whiskers .rBottom { left:
165px; top: 65px; } /*左上胡子*/ .doraemon .whiskers .lTop { left: 0;
top: 25px; } /*左中胡子*/ .doraemon .whiskers .lMiddle { left: -2px;
top: 45px; } /*左下胡子*/ .doraemon .whiskers .lBottom { left: 0; top:
65px; } /*胡子旋转角度*/ .doraemon .whiskers .r160 {
-webkit-transform: rotate(160deg); -moz-transform: rotate(160deg);
-ms-transform: rotate(160deg); -o-transform: rotate(160deg); transform:
rotate(160deg); } .doraemon .whiskers .r20 { -webkit-transform:
rotate(200deg); -moz-transform: rotate(200deg); -ms-transform:
rotate(200deg); -o-transform: rotate(200deg); transform: rotate(200deg);
}

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
/*胡须背景,主要用于挡住嘴巴的一部分,不要显得太长*/
        .doraemon .whiskers{
            width:220px;
            height:80px;
            background:#fff;
            border-radius:15px;
            position:absolute;
            top:120px;
            left:45px;
            z-index:2;   /*在鼻子和眼睛下面*/
        }
        /*所有胡子的公用样式*/
        .doraemon .whiskers .whisker {
            width: 60px;
            height: 2px;
            background: #333;
            position: absolute;
            z-index: 2;
        }
        /*右上胡子*/
        .doraemon .whiskers .rTop {
            left: 165px;
            top: 25px;
        }
        /*右中胡子*/
        .doraemon .whiskers .rMiddle {
            left: 167px;
            top: 45px;
        }
        /*右下胡子*/
        .doraemon .whiskers .rBottom {
            left: 165px;
            top: 65px;
        }
        /*左上胡子*/
        .doraemon .whiskers .lTop {
            left: 0;
            top: 25px;
        }
        /*左中胡子*/
        .doraemon .whiskers .lMiddle {
            left: -2px;
            top: 45px;
        }
        /*左下胡子*/
        .doraemon .whiskers .lBottom {
            left: 0;
            top: 65px;
        }
        /*胡子旋转角度*/
        .doraemon .whiskers .r160 {
            -webkit-transform: rotate(160deg);
            -moz-transform: rotate(160deg);
            -ms-transform: rotate(160deg);
            -o-transform: rotate(160deg);
            transform: rotate(160deg);
        }
        .doraemon .whiskers .r20 {
            -webkit-transform: rotate(200deg);
            -moz-transform: rotate(200deg);
            -ms-transform: rotate(200deg);
            -o-transform: rotate(200deg);
            transform: rotate(200deg);
        }

亚洲必赢官网 25

亚洲必赢官网 26 那样就对了,瞅着多舒畅(英文名:Jennifer)啊!一呵而就,做脖子和肉体:

CSS

/*围脖*/ .doraemon .choker { width: 230px; height: 20px; background:
#c40; /*线性渐变 让围巾看上去更自然*/ background:
-webkit-gradient(linear,left top,left bottom,from(#c40),to(#800400));
background: -moz-linear-gradient(center top,#c40,#800400); background:
-ms-linear-gradient(center top,#c40,#800400); border: 2px solid #000;
border-radius: 10px; position: relative; top: -40px; left: 45px;
z-index: 4; } /*铃铛*/ .doraemon .choker .bell { width: 40px; height:
40px; _overflow: hidden; /*IE6 hack*/ border: 2px solid #000;
border-radius: 50px; background: #f9f12a; background:
-webkit-gradient(linear, left top, left bottom,
from(#f9f12a),color-stop(0.5, #e9e11a), to(#a9a100)); background:
-moz-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100); background:
-ms-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100); box-shadow:
-5px 5px 10px rgba(0,0,0,0.25); position: absolute; top: 5px; left:
90px; } /*双横线*/ .doraemon .choker .bell_line { width: 36px;
height: 2px; background: #f9f12a; border: 2px solid #333;
border-radius: 3px 3px 0 0; position: absolute; top: 10px; } /*黑点*/
.doraemon .choker .bell_circle{ width:12px; height:10px;
background:#000; border-radius:5px; position:absolute; top:20px;
left:14px; } /*黑点下的线*/ .doraemon .choker .bell_under{ width:
3px; height:15px; background:#000; position:absolute; left: 18px;
top:27px; } /*铃铛高光*/ .doraemon .choker .bell_light{ width:12px;
height:12px; border-radius:10px; box-shadow:19px 8px 5px #fff;
position:absolute; top:-5px; left:5px; opacity:0.7; } /*身子*/
.doraemon .bodys { position: relative; top: -310px; } /*肚子*/
.doraemon .bodys .body { width: 220px; height: 165px; background:
#07beea; background: -webkit-gradient(linear,right top,left
top,from(#07beea),color-stop(0.5, #0073b3),color-stop(0.75,#00b0e0),
to(#0096be)); background: -moz-linear-gradient(right
center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%); background:
-ms-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0
75%,#0096be 100%); border:2px solid #333; position:absolute;
top:265px; left:50px; } /*白色肚兜*/ .doraemon .bodys .wraps { width:
170px; height: 170px; background: #fff; background:
-webkit-gradient(linear, right top, left bottom,
from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444),
to(#000)); background: -moz-linear-gradient(right top,#fff,#fff
75%,#eee 83%,#999 90%,#444 95%,#000); background:
-ms-linear-gradient(right top,#fff,#fff 75%,#eee 83%,#999 90%,#444
95%,#000); border: 2px solid #000; border-radius: 85px; position:
absolute; left: 72px; top: 230px; } /*口袋*/ .doraemon .bodys .pocket
{ width: 130px; height: 130px; border-radius: 65px; background: #fff;
background: -webkit-gradient(linear, right top, left bottom,
from(#fff),color-stop(0.70,#fff),color-stop(0.75,#f8f8f8),color-stop(0.80,#eee),color-stop(0.88,#ddd),
to(#fff)); background: -moz-linear-gradient(right top, #fff, #fff
70%,#f8f8f8 75%,#eee 80%,#ddd 88%, #fff); background:
-ms-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee
80%,#ddd 88%, #fff); border: 2px solid #000; position:absolute; top:
250px; left: 92px; } /*屏蔽口袋一半*/ .doraemon .bodys .pocket_mask {
width: 134px; height: 60px; background:#fff; border-bottom: 2px solid
#000; position:absolute; top: 259px; left: 92px; }

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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
/*围脖*/
        .doraemon .choker {
            width: 230px;
            height: 20px;
            background: #c40;
            /*线性渐变 让围巾看上去更自然*/
            background: -webkit-gradient(linear,left top,left bottom,from(#c40),to(#800400));
            background: -moz-linear-gradient(center top,#c40,#800400);
            background: -ms-linear-gradient(center top,#c40,#800400);
            border: 2px solid #000;
            border-radius: 10px;
            position: relative;
            top: -40px;
            left: 45px;
            z-index: 4;
        }
        /*铃铛*/
        .doraemon .choker .bell {
            width: 40px;
            height: 40px;
            _overflow: hidden; /*IE6 hack*/
            border: 2px solid #000;
            border-radius: 50px;
            background: #f9f12a;
            background: -webkit-gradient(linear, left top, left bottom, from(#f9f12a),color-stop(0.5, #e9e11a), to(#a9a100));
            background: -moz-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100);
            background: -ms-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100);
            box-shadow: -5px 5px 10px rgba(0,0,0,0.25);
            position: absolute;
            top: 5px;
            left: 90px;
        }
        /*双横线*/
        .doraemon .choker .bell_line {
            width: 36px;
            height: 2px;
            background: #f9f12a;
            border: 2px solid #333;
            border-radius: 3px 3px 0 0;
            position: absolute;
            top: 10px;
        }
        /*黑点*/
        .doraemon .choker .bell_circle{
            width:12px;
            height:10px;
            background:#000;
            border-radius:5px;
            position:absolute;
            top:20px;
            left:14px;
        }
        /*黑点下的线*/
        .doraemon .choker .bell_under{
            width: 3px;
            height:15px;
            background:#000;
            position:absolute;
            left: 18px;
            top:27px;
        }
        /*铃铛高光*/
        .doraemon .choker .bell_light{
            width:12px;
            height:12px;
            border-radius:10px;
            box-shadow:19px 8px 5px #fff;
            position:absolute;
            top:-5px;
            left:5px;
            opacity:0.7;
        }
        /*身子*/
        .doraemon .bodys {
            position: relative;
            top: -310px;
        }
        /*肚子*/
        .doraemon .bodys .body {
            width: 220px;
            height: 165px;
            background: #07beea;
            background: -webkit-gradient(linear,right top,left top,from(#07beea),color-stop(0.5, #0073b3),color-stop(0.75,#00b0e0), to(#0096be));
            background: -moz-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);
            background: -ms-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);
            border:2px solid #333;
            position:absolute;
            top:265px;
            left:50px;
        }
        /*白色肚兜*/
            .doraemon .bodys .wraps {
                width: 170px;
                height: 170px;
                background: #fff;
                background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444), to(#000));
                background: -moz-linear-gradient(right top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000);
                background: -ms-linear-gradient(right top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000);
                border: 2px solid #000;
                border-radius: 85px;
                position: absolute;
                left: 72px;
                top: 230px;
            }
            /*口袋*/
            .doraemon .bodys .pocket {
                width: 130px;
                height: 130px;
                border-radius: 65px;
                background: #fff;
                background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.70,#fff),color-stop(0.75,#f8f8f8),color-stop(0.80,#eee),color-stop(0.88,#ddd), to(#fff));
                background: -moz-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%, #fff);
                background: -ms-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%, #fff);
                border: 2px solid #000;
                position:absolute;
                top: 250px;
                left: 92px;
            }
            /*挡住口袋一半*/
            .doraemon .bodys .pocket_mask {
                width: 134px;
                height: 60px;
                background:#fff;
                border-bottom: 2px solid #000;
                position:absolute;
                top: 259px;
                left: 92px;
           }

好吧,脖子和身体都有哇!上图:

亚洲必赢官网 27

明日看起来有点像摆设品,不过笑容照旧那么单纯,好了,赶紧把手脚做出来:

CSS

/*左右手*/ .doraemon .hand_right, .doraemon .hand_left { height:
100px; width: 100px; position: absolute; top: 272px; left: 248px; }
/*左手*/ .doraemon .hand_left { left: -10px; } /*手臂公共部分*/
.doraemon .arm { width:80px; height:50px; background: #07beea;
background: -webkit-gradient(linear, left top, left bottom,
from(#07beea),color-stop(0.85,#07beea), to(#555)); background:
-moz-linear-gradient(center top, #07BEEA, #07BEEA 85%, #555);
background: -ms-linear-gradient(center top, #07BEEA, #07BEEA 85%,
#555); border: 1px solid #000000; box-shadow: -10px 7px 10px rgba(0,
0, 0, 0.35); z-index: -1; position: relative; } /*出手手臂*/ .doraemon
.hand_right .arm { top: 17px; -webkit-transform: rotate(35deg);
-moz-transform: rotate(35deg); -ms-transform: rotate(35deg);
-o-transform: rotate(35deg); transform: rotate(35deg); } /*左手手臂*/
.doraemon .hand_left .arm { top: 17px; background: #0096be;
/*背阴一面利用纯色,使其有立体感*/ box-shadow: 5px -7px 10px rgba(0,
0, 0, 0.25); -webkit-transform: rotate(145deg); -moz-transform:
rotate(145deg); -ms-transform: rotate(145deg); -o-transform:
rotate(145deg); transform: rotate(145deg); } /*圆形手掌公共部分*/
.doraemon .circle { width: 60px; height: 60px; border-radius: 30px;
border: 2px solid #000; background: #fff; background:
-webkit-gradient(linear, right top, left bottom,
from(#fff),color-stop(0.5,#fff),color-stop(0.70,#eee),color-stop(0.8,#ddd),
to(#999)); background: -moz-linear-gradient(right top, #fff, #fff
50%, #eee 70%, #ddd 80%,#999); background: -ms-linear-gradient(right
top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999); position: absolute;
} /*右边手掌*/ .doraemon .hand_right .circle { left: 40px; top: 32px;
} /*左边手掌*/ .doraemon .hand_left .circle { left: -20px; top: 32px;
} /*手臂和人身结合处,使用背景遮住边框*/ .doraemon .arm_rewrite {
height: 45px; width: 5px; background: #07beea; position: relative; }
/*左侧结合处*/ .doraemon .hand_right .arm_rewrite { top: -45px;
left: 22px; } /*左侧结合处*/ .doraemon .hand_left .arm_rewrite {
top: -45px; left: 60px; background: #0096be;
/*同理,背光一面利用纯色,使其有立体感*/ } /*脚部*/ .doraemon .foot
{ width: 280px; height: 40px; position: relative; top: 55px; left: 20px;
} /*左左脚共同样式*/ .doraemon .foot .left, .doraemon .foot .right {
width: 125px; height: 30px; background: #fff; background:
-webkit-gradient(linear, right top, left bottom,
from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999));
background: -moz-linear-gradient(right top, #fff, #fff 75%, #eee 85%,
#999); background: -ms-linear-gradient(right top, #fff, #fff 75%,
#eee 85%, #999); border: 2px solid #333; border-radius: 80px 60px
60px 40px; box-shadow: -6px 0 10px rgba(0, 0, 0, 0.35); position:
relative; } .doraemon .foot .left { left: 8px; top: 65px; } .doraemon
.foot .right { top: 31px; left: 141px; }
/*双脚中间的裂缝,加阴影使用立体感*/ .doraemon .foot .foot_rewrite {
width: 20px; height: 10px; background: #fff; background:
-webkit-gradient(linear, right top, left bottom,
from(#666),color-stop(0.83,#fff), to(#fff)); background:
-moz-linear-gradient(right top, #666, #fff 83%, #fff); background:
-ms-linear-gradient(right top, #666, #fff 83%, #fff);
/*创设半圆效果*/ border: 2px solid #000; border-bottom: none;
border-radius: 40px 40px 0 0; position: relative; top: -11px; left:
130px; _left: 127px; }

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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
/*左右手*/
            .doraemon .hand_right, .doraemon .hand_left {
                height: 100px;
                width: 100px;
                position: absolute;
                top: 272px;
                left: 248px;
            }
            /*左手*/
            .doraemon .hand_left {
                left: -10px;
            }
            /*手臂公共部分*/
            .doraemon .arm {
                width:80px;
                height:50px;
                background: #07beea;
                background: -webkit-gradient(linear, left top, left bottom, from(#07beea),color-stop(0.85,#07beea), to(#555));
                background: -moz-linear-gradient(center top, #07BEEA, #07BEEA 85%, #555);
                background: -ms-linear-gradient(center top, #07BEEA, #07BEEA 85%, #555);
                border: 1px solid #000000;
                box-shadow: -10px 7px 10px rgba(0, 0, 0, 0.35);
                z-index: -1;
                position: relative;
            }
            /*右手手臂*/
            .doraemon .hand_right .arm {
                top: 17px;
                -webkit-transform: rotate(35deg);
                -moz-transform: rotate(35deg);
                -ms-transform: rotate(35deg);
                -o-transform: rotate(35deg);
                transform: rotate(35deg);
            }
            /*左手手臂*/
            .doraemon .hand_left .arm {
                top: 17px;
                background: #0096be;   /*背光一面使用纯色,使其有立体感*/
                box-shadow: 5px -7px 10px rgba(0, 0, 0, 0.25);
                -webkit-transform: rotate(145deg);
                -moz-transform: rotate(145deg);
                -ms-transform: rotate(145deg);
                -o-transform: rotate(145deg);
                transform: rotate(145deg);
            }
            /*圆形手掌公共部分*/
            .doraemon .circle {
                width: 60px;
                height: 60px;
                border-radius: 30px;
                border: 2px solid #000;
                background: #fff;
                background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.5,#fff),color-stop(0.70,#eee),color-stop(0.8,#ddd), to(#999));
                background: -moz-linear-gradient(right top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999);
                background: -ms-linear-gradient(right top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999);
                position: absolute;
            }
            /*右手手掌*/
            .doraemon .hand_right .circle {
                left: 40px;
                top: 32px;
            }
            /*左手手掌*/
            .doraemon .hand_left .circle {
                left: -20px;
                top: 32px;
            }
            /*手臂和身体结合处,使用背景遮住边框*/
            .doraemon .arm_rewrite {
                height: 45px;
                width: 5px;
                background: #07beea;
                position: relative;
            }
            /*右手结合处*/
            .doraemon .hand_right .arm_rewrite {
                top: -45px;
                left: 22px;
            }
            /*左手结合处*/
            .doraemon .hand_left .arm_rewrite {
                top: -45px;
                left: 60px;
                background: #0096be; /*同理,背光一面使用纯色,使其有立体感*/
            }
            /*脚部*/
            .doraemon .foot {
                width: 280px;
                height: 40px;
                position: relative;
                top: 55px;
                left: 20px;
            }
            /*左右脚共同样式*/
            .doraemon .foot .left, .doraemon .foot .right {
                width: 125px;
                height: 30px;
                background: #fff;
                background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999));
                background: -moz-linear-gradient(right top, #fff, #fff 75%, #eee 85%, #999);
                background: -ms-linear-gradient(right top, #fff, #fff 75%, #eee 85%, #999);
                border: 2px solid #333;
                border-radius: 80px 60px 60px 40px;
                box-shadow: -6px 0 10px rgba(0, 0, 0, 0.35);
                position: relative;
            }
            .doraemon .foot .left {
                left: 8px;
                top: 65px;
            }
 
            .doraemon .foot .right {
                top: 31px;
                left: 141px;
            }
            /*双脚之间的缝隙,加阴影使用立体感*/
            .doraemon .foot .foot_rewrite {
                width: 20px;
                height: 10px;
                background: #fff;
                background: -webkit-gradient(linear, right top, left bottom, from(#666),color-stop(0.83,#fff), to(#fff));
                background: -moz-linear-gradient(right top, #666, #fff 83%, #fff);
                background: -ms-linear-gradient(right top, #666, #fff 83%, #fff);
                /*制作半圆效果*/
                border: 2px solid #000;  
                border-bottom: none;
                border-radius: 40px 40px 0 0;
                position: relative;
                top: -11px;
                left: 130px;
                _left: 127px;
            }

好了,最后完整结果:

亚洲必赢官网 28

看一下,效果是否和一发轫的同一呢 亚洲必赢官网 29 ,尽管做好了,不过仍然得以让它动起来的,比如眼睛,大家能够给它加个动画效果,让眼睛打转起来:

CSS

/*眼珠*/ .doraemon .eyes .eye .black { width: 14px; height: 14px;
background: #000; border-radius: 7px; position: absolute; top: 40px;
-webkit-animation: eyemove 3s linear infinite; -moz-animation: eyemove
3s linear infinite; -ms-animation: eyemove 3s linear infinite;
-o-animation: eyemove 3s linear infinite; animation: eyemove 3s linear
infinite; } /*让眼睛动起来*/ @-webkit-keyframes eyemove { 70%{
margin:0 0 0 0; } 80% { margin: -22px 0 0 0; } 85% { margin: -22px 0 0
5px; } 90% { margin: -22px 10px 0 0; } 93% { margin: -22px 0 0 0; } 96%
{ margin: 0 0 0 0; } } @-moz-keyframes eyemove { 70% { margin: 0 0 0 0;
} 80% { margin: -22px 0 0 0; } 85% { margin: -22px 0 0 5px; } 90% {
margin: -22px 10px 0 0; } 93% { margin: -22px 0 0 0; } 96% { margin: 0 0
0 0; } } @-o-keyframes eyemove { 70% { margin: 0 0 0 0; } 80% { margin:
-22px 0 0 0; } 85% { margin: -22px 0 0 5px; } 90% { margin: -22px 10px 0
0; } 93% { margin: -22px 0 0 0; } 96% { margin: 0 0 0 0; } } @keyframes
eyemove { 70% { margin: 0 0 0 0; } 80% { margin: -22px 0 0 0; } 85% {
margin: -22px 0 0 5px; } 90% { margin: -22px 10px 0 0; } 93% { margin:
-22px 0 0 0; } 96% { margin: 0 0 0 0; } }

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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
/*眼珠*/
        .doraemon .eyes .eye .black {
            width: 14px;
            height: 14px;
            background: #000;
            border-radius: 7px;
            position: absolute;
            top: 40px;
            -webkit-animation: eyemove 3s linear infinite;
            -moz-animation: eyemove 3s linear infinite;
            -ms-animation: eyemove 3s linear infinite;
            -o-animation: eyemove 3s linear infinite;
            animation: eyemove 3s linear infinite;
        }
 
        /*让眼睛动起来*/
        @-webkit-keyframes eyemove {
            70%{
                margin:0 0 0 0;
            }
            80% {
                margin: -22px 0 0 0;
            }
 
            85% {
                margin: -22px 0 0 5px;
            }
 
            90% {
                margin: -22px 10px 0 0;
            }
 
            93% {
                margin: -22px 0 0 0;
            }
 
            96% {
                margin: 0 0 0 0;
            }
        }
 
        @-moz-keyframes eyemove {
            70% {
                margin: 0 0 0 0;
            }
 
            80% {
                margin: -22px 0 0 0;
            }
 
            85% {
                margin: -22px 0 0 5px;
            }
 
            90% {
                margin: -22px 10px 0 0;
            }
 
            93% {
                margin: -22px 0 0 0;
            }
 
            96% {
                margin: 0 0 0 0;
            }
        }
 
        @-o-keyframes eyemove {
            70% {
                margin: 0 0 0 0;
            }
 
            80% {
                margin: -22px 0 0 0;
            }
 
            85% {
                margin: -22px 0 0 5px;
            }
 
            90% {
                margin: -22px 10px 0 0;
            }
 
            93% {
                margin: -22px 0 0 0;
            }
 
            96% {
                margin: 0 0 0 0;
            }
        }
        @keyframes eyemove {
            70% {
                margin: 0 0 0 0;
            }
 
            80% {
                margin: -22px 0 0 0;
            }
 
            85% {
                margin: -22px 0 0 5px;
            }
 
            90% {
                margin: -22px 10px 0 0;
            }
 
            93% {
                margin: -22px 0 0 0;
            }
 
            96% {
                margin: 0 0 0 0;
            }
        }

OK,那样,眼睛就会动了,有趣味的可以试一下,那里就不能突显了。但是借使您有何更好的卡通片效果也足以品尝,那么那么些案例就得了了。

PS:虽说那只是一个案例,但是确实协助自己开阔思维,而且实际做一个这么的机能,可能会费用很多时光,至少对自我的话近来的确是那样子,首要难点照旧布局一定和颜料的创设搭配,才能使形象更是有板有眼涉笔成趣!可能也有人对PS或者Flash等图形处理软件不是很熟,对用CSS3画出一部分人选或者其余职能相比没有头绪,那么就可以去部分网站参考设计师们的安插性构图,图形分解等连锁安排学问,扶助大家更好地精通,那里推荐多少个网站:

站酷网

闪吧

网页设计师联盟

灰色理想

2 赞 4 收藏 1
评论

亚洲必赢官网 30

一、CSS3概要

CSS(Cascading Style
Sheet)是层叠样式表的趣味,CSS3就是在CSS2.1的根基上涨级的CSS新本子,属于HTML5的一有的。它可以有效地对页面的布局、字体、颜色、背景、动画和任何成效得以完成。CSS3是CSS技术的升级换代版本,CSS3语言开发是向阳模块化发展的。从前的正规作为一个模块实在是太庞大而且相比复杂,所以,把它表达为部分小的模块,越多新的模块也被投入进去。那些模块包括:
盒子模型、列表模块、超链接格局 、语言模块 、背景和边框 、文字特效
、多栏布局等。

亚洲必赢官网 31

一、CSS3概要

CSS(Cascading Style
Sheet)是层叠样式表的趣味,CSS3就是在CSS2.1的底子上提高的CSS新本子,属于HTML5的一有些。它可以有效地对页面的布局、字体、颜色、背景、动画和别的效用落到实处。CSS3是CSS技术的升级版本,CSS3语言开发是向阳模块化发展的。在此以前的正经作为一个模块实在是太庞大而且相比复杂,所以,把它表明为部分小的模块,越来越多新的模块也被投入进去。那个模块包涵:
盒子模型、列表模块、超链接格局 、语言模块 、背景和边框 、文字特效
、多栏布局等。

亚洲必赢官网 32

1.1、特点

1.1、特点

1.2、效果演示

纯CSS3画出小黄人并促成动画效果

亚洲必赢官网 33

HTML页面:

亚洲必赢官网 34亚洲必赢官网 ,<!DOCTYPE
html> <html lang=”en”> <head> <meta
charset=”UTF-8″> <title>drawLittleHuang</title> <link
rel=”stylesheet” type=”text/css” href=”drawLittleHuang.css”>
</head> <body> <div class=”wrapper”><!– 容器
–> <div class=”littleH”><!– 小黄人 –> <div
class=”bodyH”><!– 身体 –> <div class=”trousers”><!–
裤子 –> <div class=”condoleBelt”><!– 吊带 –> <div
class=”left”></div> <div class=”right”></div>
</div> <div class=”trousers_top”></div><!–
裤子优良的矩形部分 –> <div class=”pocket”></div><!–
裤袋 –> <!– 三条线 –> <span
class=”line_left”></span> <span
class=”line_right”></span> <span
class=”line_bottom”></span> </div> </div> <div
class=”hair”><!– 头发 –> <span
class=”left_hair_one”></span> <span
class=”left_hair_two”></span> </div> <div
class=”eyes”><!– 眼睛 –> <div class=”leftEye”><!–
左眼 –> <div class=”left_blackEye”> <div
class=”left_white”></div> </div> </div> <div
class=”rightEye”><!– 右眼 –> <div
class=”right_blackEye”> <div class=”right_white”></div>
</div> </div> </div> <div class=”mouse”><!–
嘴巴 –> <div class=”mouse_shape”></div> </div>
<div class=”hands”><!– 双手 –> <div
class=”leftHand”></div> <div
class=”rightHand”></div> </div> <div
class=”feet”><!– 双脚 –> <div
class=”left_foot”></div> <div
class=”right_foot”></div> </div> <div
class=”groundShadow”></div><!– 脚底阴影 –> </div>
</div> </body> </html> View Code

CSS样式:

亚洲必赢官网 35@charset
“utf-8″; body{ margin: 0; padding:0; } .wrapper{ width: 300px;
margin:100px auto; } .litteH{ position: relative; } .bodyH{ position:
absolute; width: 240px; height: 400px; border:5px solid #000;
border-radius: 115px; background: rgb(249,217,70); overflow: hidden;
z-index: 2; } .bodyH .condoleBelt{ position: absolute; } .bodyH
.condoleBelt .left, .bodyH .condoleBelt .right{ width: 100px; height:
16px; border:5px solid #000; background: rgb(32,116,160); position:
absolute; top:-90px; left:-35px; z-index: 2;
-webkit-transform:rotate(45deg); } .bodyH .condoleBelt .left{ top:-88px;
left:165px; -webkit-transform:rotate(-45deg); } .bodyH .condoleBelt
.left:after, .bodyH .condoleBelt .right:after{ content: ”; width: 8px;
height: 8px; border-radius: 50%; background: #000; position: absolute;
top:4px; left:88px; } .bodyH .condoleBelt .left:after{ left:5px; }
.bodyH .trousers{ position: absolute; bottom: 0; width: 100%; height:
100px; border-top: 6px solid #000; background: rgb(32,116,160); }
.trousers_top{ width: 160px; height: 60px; border:6px solid #000;
border-bottom: none; border-radius: 0 0 5px 5px; background:
rgb(32,116,160); position: absolute; bottom: 100px; left:34px; }
.pocket{ width: 60px; height: 45px; border:6px solid #000;
border-radius: 0px 0px 25px 25px; position: absolute; bottom:65px;
left:84px; } .line_right{ width: 30px; height: 30px;
border-bottom-left-radius: 100px; border-bottom:6px solid #000;
border-left:6px solid #000; position: absolute; left: 0; bottom:60px;
-webkit-transform:rotate(-75deg); } .line_left{ width: 30px; height:
30px; border-bottom-right-radius: 100px; border-bottom:6px solid #000;
border-right:6px solid #000; position: absolute; right: 0; bottom:63px;
-webkit-transform:rotate(75deg); } .line_bottom{ height: 40px;
border:3px solid #000; border-radius: 3px; position: absolute;
left:118px; bottom: 0px; } .hair{ position: relative; }
.left_hair_one{ width: 130px; height: 100px; border-radius: 50%;
border-top:8px solid #000; position: absolute; left:17px; top:-17px;
-webkit-transform:rotate(27deg); -webkit-animation: lefthair 2s
ease-in-out infinite; } @-webkit-keyframes lefthair{ 0%,25%,31%,100%{ }
30%{ -webkit-transform: rotate(31deg) translate3d(-3px,-1px,0); } }
.left_hair_two{ width: 80px; height: 80px; border-radius: 50%;
border-top:6px solid #000; position: absolute; left:45px; top:-10px;
-webkit-transform:rotate(15deg); } .eyes{ position: relative; z-index:
3; } .eyes .leftEye,.eyes .rightEye{ width: 85px; height: 85px;
border-radius: 50%; border:6px solid #000; background: #fff; position:
absolute; top:60px; left: 27px; } .eyes .leftEye{ left: 124px; } .eyes
.leftEye .left_blackEye, .eyes .rightEye .right_blackEye{ width: 40px;
height: 40px; border-radius: 50%; background: #000; position: absolute;
top:24px; left:22px; -webkit-animation: blackeye 5s ease-in infinite; }
@-webkit-keyframes blackeye{ 0%,20%,50%,70%,100%{ -webkit-transform:
translateX(0px); } 30%,40%{ -webkit-transform: translateX(15px); }
80%,90%{ -webkit-transform: translateX(-15px); } } .eyes .leftEye
.left_blackEye .left_white, .eyes .rightEye .right_blackEye
.right_white{ width: 20px; height: 20px; border-radius: 50%;
background: #fff; position: absolute; top:7px; left:17px;
-webkit-animation: whiteeye 5s ease-in-out infinite; }
@-webkit-keyframes whiteeye{ 0%,20%,50%,70%,100%{ -webkit-transform:
translateX(0px); } 30%,40%{ -webkit-transform: translate3d(3px,4px,0); }
80%,90%{ -webkit-transform: translate3d(-15px,4px,0); } } .eyes .leftEye
.left_blackEye .left_white{ top:4px; left:17px; } .eyes
.leftEye:after, .eyes .rightEye:after{ content: ”; width: 28px; height:
18px; background: #000; position: absolute; left:-30px; top:37px;
-webkit-transform:skewX(20deg) rotate(7deg); } .eyes .leftEye:after{
left:89px; top:37px; -webkit-transform:skewX(-20deg) rotate(-7deg); }
.mouse{ position: relative; } .mouse .mouse_shape{ width: 55px; height:
35px; border:5px solid #000; border-bottom-left-radius: 30px;
background: #fff; position: absolute; top:175px; left:98px; z-index: 3;
-webkit-transform:rotate(-35deg); -webkit-animation: mouse 5s
ease-in-out infinite; } @-webkit-keyframes mouse{ 40%,43%{ width: 45px;
height: 25px; top:180px; } 0%,35%,48%,100%{ width: 55px; height: 35px;
top:175px; -webkit-transform:rotate(-35deg); } } .mouse
.mouse_shape:after{ content: ”; width: 70px; height: 32px;
border-bottom:5px solid #000; border-radius:35px 26px 5px 5px;
background: rgb(249,217,70); position: absolute; top:-16px; left:3px;
-webkit-transform:rotate(34deg); -webkit-animation: mouse_mask 5s
ease-in-out infinite; } @-webkit-keyframes mouse_mask{ 40%,43%{ width:
60.5px; top:-19.3px; left:1.5px; } 0%,35%,48%,100%{ width: 70px;
top:-16px; left:3px; -webkit-transform:rotate(33deg); } } .hands{
position: relative; } .hands .leftHand, .hands .rightHand{ width: 80px;
height: 80px; border:6px solid #000; border-radius: 25px; background:
rgb(249,217,70); position: absolute; top:220px; left:-23px;
-webkit-transform:rotate(40deg); -webkit-animation:rightHand .8s
ease-in-out infinite; } @-webkit-keyframes rightHand{ 0%,50%,100%{
-webkit-transform: rotate(40deg); } 30%{ -webkit-transform:
rotate(37deg) translateX(1px); } } .hands .leftHand{ left:182px;
top:220px; -webkit-transform:rotate(-40deg); -webkit-animation:leftHand
.8s ease-in-out infinite; } @-webkit-keyframes leftHand{ 0%,50%,100%{
-webkit-transform: rotate(-40deg); } 80%{ -webkit-transform:
rotate(-37deg) translateX(-1px); } } .hands .leftHand:after, .hands
.rightHand:after{ content: ”; width: 6px; border:3px solid #000;
border-radius: 3px; position: absolute; left:13px; top:50px;
-webkit-transform:rotate(90deg); } .hands .leftHand:after{ left:53px;
top:50px; -webkit-transform:rotate(-90deg); } .feet{ position: relative;
} .feet .left_foot, .feet .right_foot{ width: 36px; height: 50px;
border-bottom-right-radius: 6px; border-bottom-left-radius: 9px;
background: #000; position: absolute; top: 406px; left:88px;
-webkit-transform-origin: right top; -webkit-animation: rightfoot .8s
ease-in-out infinite; } @-webkit-keyframes rightfoot{ 0%,50%,100%{
-webkit-transform: rotate(0deg); } 80%{ -webkit-transform:
rotate(10deg); } } .feet .left_foot{ border-bottom-right-radius: 9px;
border-bottom-left-radius: 6px; left:130px; -webkit-transform-origin:
left top; -webkit-animation: leftfoot .8s ease-in-out infinite; }
@-webkit-keyframes leftfoot{ 0%,50%,100%{ -webkit-transform:
rotate(0deg); } 30%{ -webkit-transform: rotate(-10deg); } } .feet
.left_foot:after, .feet .right_foot:after{ content: ”; width: 60px;
height: 35px; border-radius: 20px 10px 21px 15px; background: #000;
position: absolute; left:-36px; top:14.4px;
-webkit-transform:rotate(5deg); } .feet .left_foot:after{
border-radius: 10px 20px 15px 21px; left:13px;
-webkit-transform:rotate(-5deg); } .groundShadow{ width: 200px; height:
2px; border-radius: 50%; background: rgba(0,0,0,0.3); box-shadow: 0 0
2px 4px rgba(0,0,0,0.3); position: relative; top: 455px; left:25px; }
View Code

 

相册演示的代码可以在演示中下载到。

1.2、效果演示

纯CSS3画出小黄人并促成动画效果

亚洲必赢官网 36

HTML页面:

亚洲必赢官网 37<!DOCTYPE
html> <html lang=”en”> <head> <meta
charset=”UTF-8″> <title>drawLittleHuang</title> <link
rel=”stylesheet” type=”text/css” href=”drawLittleHuang.css”>
</head> <body> <div class=”wrapper”><!– 容器
–> <div class=”littleH”><!– 小黄人 –> <div
class=”bodyH”><!– 身体 –> <div class=”trousers”><!–
裤子 –> <div class=”condoleBelt”><!– 吊带 –> <div
class=”left”></div> <div class=”right”></div>
</div> <div class=”trousers_top”></div><!–
裤子卓绝的矩形部分 –> <div class=”pocket”></div><!–
裤袋 –> <!– 三条线 –> <span
class=”line_left”></span> <span
class=”line_right”></span> <span
class=”line_bottom”></span> </div> </div> <div
class=”hair”><!– 头发 –> <span
class=”left_hair_one”></span> <span
class=”left_hair_two”></span> </div> <div
class=”eyes”><!– 眼睛 –> <div class=”leftEye”><!–
左眼 –> <div class=”left_blackEye”> <div
class=”left_white”></div> </div> </div> <div
class=”rightEye”><!– 右眼 –> <div
class=”right_blackEye”> <div class=”right_white”></div>
</div> </div> </div> <div class=”mouse”><!–
嘴巴 –> <div class=”mouse_shape”></div> </div>
<div class=”hands”><!– 双手 –> <div
class=”leftHand”></div> <div
class=”rightHand”></div> </div> <div
class=”feet”><!– 双脚 –> <div
class=”left_foot”></div> <div
class=”right_foot”></div> </div> <div
class=”groundShadow”></div><!– 脚底阴影 –> </div>
</div> </body> </html> View Code

CSS样式:

亚洲必赢官网 38@charset
“utf-8″; body{ margin: 0; padding:0; } .wrapper{ width: 300px;
margin:100px auto; } .litteH{ position: relative; } .bodyH{ position:
absolute; width: 240px; height: 400px; border:5px solid #000;
border-radius: 115px; background: rgb(249,217,70); overflow: hidden;
z-index: 2; } .bodyH .condoleBelt{ position: absolute; } .bodyH
.condoleBelt .left, .bodyH .condoleBelt .right{ width: 100px; height:
16px; border:5px solid #000; background: rgb(32,116,160); position:
absolute; top:-90px; left:-35px; z-index: 2;
-webkit-transform:rotate(45deg); } .bodyH .condoleBelt .left{ top:-88px;
left:165px; -webkit-transform:rotate(-45deg); } .bodyH .condoleBelt
.left:after, .bodyH .condoleBelt .right:after{ content: ”; width: 8px;
height: 8px; border-radius: 50%; background: #000; position: absolute;
top:4px; left:88px; } .bodyH .condoleBelt .left:after{ left:5px; }
.bodyH .trousers{ position: absolute; bottom: 0; width: 100%; height:
100px; border-top: 6px solid #000; background: rgb(32,116,160); }
.trousers_top{ width: 160px; height: 60px; border:6px solid #000;
border-bottom: none; border-radius: 0 0 5px 5px; background:
rgb(32,116,160); position: absolute; bottom: 100px; left:34px; }
.pocket{ width: 60px; height: 45px; border:6px solid #000;
border-radius: 0px 0px 25px 25px; position: absolute; bottom:65px;
left:84px; } .line_right{ width: 30px; height: 30px;
border-bottom-left-radius: 100px; border-bottom:6px solid #000;
border-left:6px solid #000; position: absolute; left: 0; bottom:60px;
-webkit-transform:rotate(-75deg); } .line_left{ width: 30px; height:
30px; border-bottom-right-radius: 100px; border-bottom:6px solid #000;
border-right:6px solid #000; position: absolute; right: 0; bottom:63px;
-webkit-transform:rotate(75deg); } .line_bottom{ height: 40px;
border:3px solid #000; border-radius: 3px; position: absolute;
left:118px; bottom: 0px; } .hair{ position: relative; }
.left_hair_one{ width: 130px; height: 100px; border-radius: 50%;
border-top:8px solid #000; position: absolute; left:17px; top:-17px;
-webkit-transform:rotate(27deg); -webkit-animation: lefthair 2s
ease-in-out infinite; } @-webkit-keyframes lefthair{ 0%,25%,31%,100%{ }
30%{ -webkit-transform: rotate(31deg) translate3d(-3px,-1px,0); } }
.left_hair_two{ width: 80px; height: 80px; border-radius: 50%;
border-top:6px solid #000; position: absolute; left:45px; top:-10px;
-webkit-transform:rotate(15deg); } .eyes{ position: relative; z-index:
3; } .eyes .leftEye,.eyes .rightEye{ width: 85px; height: 85px;
border-radius: 50%; border:6px solid #000; background: #fff; position:
absolute; top:60px; left: 27px; } .eyes .leftEye{ left: 124px; } .eyes
.leftEye .left_blackEye, .eyes .rightEye .right_blackEye{ width: 40px;
height: 40px; border-radius: 50%; background: #000; position: absolute;
top:24px; left:22px; -webkit-animation: blackeye 5s ease-in infinite; }
@-webkit-keyframes blackeye{ 0%,20%,50%,70%,100%{ -webkit-transform:
translateX(0px); } 30%,40%{ -webkit-transform: translateX(15px); }
80%,90%{ -webkit-transform: translateX(-15px); } } .eyes .leftEye
.left_blackEye .left_white, .eyes .rightEye .right_blackEye
.right_white{ width: 20px; height: 20px; border-radius: 50%;
background: #fff; position: absolute; top:7px; left:17px;
-webkit-animation: whiteeye 5s ease-in-out infinite; }
@-webkit-keyframes whiteeye{ 0%,20%,50%,70%,100%{ -webkit-transform:
translateX(0px); } 30%,40%{ -webkit-transform: translate3d(3px,4px,0); }
80%,90%{ -webkit-transform: translate3d(-15px,4px,0); } } .eyes .leftEye
.left_blackEye .left_white{ top:4px; left:17px; } .eyes
.leftEye:after, .eyes .rightEye:after{ content: ”; width: 28px; height:
18px; background: #000; position: absolute; left:-30px; top:37px;
-webkit-transform:skewX(20deg) rotate(7deg); } .eyes .leftEye:after{
left:89px; top:37px; -webkit-transform:skewX(-20deg) rotate(-7deg); }
.mouse{ position: relative; } .mouse .mouse_shape{ width: 55px; height:
35px; border:5px solid #000; border-bottom-left-radius: 30px;
background: #fff; position: absolute; top:175px; left:98px; z-index: 3;
-webkit-transform:rotate(-35deg); -webkit-animation: mouse 5s
ease-in-out infinite; } @-webkit-keyframes mouse{ 40%,43%{ width: 45px;
height: 25px; top:180px; } 0%,35%,48%,100%{ width: 55px; height: 35px;
top:175px; -webkit-transform:rotate(-35deg); } } .mouse
.mouse_shape:after{ content: ”; width: 70px; height: 32px;
border-bottom:5px solid #000; border-radius:35px 26px 5px 5px;
background: rgb(249,217,70); position: absolute; top:-16px; left:3px;
-webkit-transform:rotate(34deg); -webkit-animation: mouse_mask 5s
ease-in-out infinite; } @-webkit-keyframes mouse_mask{ 40%,43%{ width:
60.5px; top:-19.3px; left:1.5px; } 0%,35%,48%,100%{ width: 70px;
top:-16px; left:3px; -webkit-transform:rotate(33deg); } } .hands{
position: relative; } .hands .leftHand, .hands .rightHand{ width: 80px;
height: 80px; border:6px solid #000; border-radius: 25px; background:
rgb(249,217,70); position: absolute; top:220px; left:-23px;
-webkit-transform:rotate(40deg); -webkit-animation:rightHand .8s
ease-in-out infinite; } @-webkit-keyframes rightHand{ 0%,50%,100%{
-webkit-transform: rotate(40deg); } 30%{ -webkit-transform:
rotate(37deg) translateX(1px); } } .hands .leftHand{ left:182px;
top:220px; -webkit-transform:rotate(-40deg); -webkit-animation:leftHand
.8s ease-in-out infinite; } @-webkit-keyframes leftHand{ 0%,50%,100%{
-webkit-transform: rotate(-40deg); } 80%{ -webkit-transform:
rotate(-37deg) translateX(-1px); } } .hands .leftHand:after, .hands
.rightHand:after{ content: ”; width: 6px; border:3px solid #000;
border-radius: 3px; position: absolute; left:13px; top:50px;
-webkit-transform:rotate(90deg); } .hands .leftHand:after{ left:53px;
top:50px; -webkit-transform:rotate(-90deg); } .feet{ position: relative;
} .feet .left_foot, .feet .right_foot{ width: 36px; height: 50px;
border-bottom-right-radius: 6px; border-bottom-left-radius: 9px;
background: #000; position: absolute; top: 406px; left:88px;
-webkit-transform-origin: right top; -webkit-animation: rightfoot .8s
ease-in-out infinite; } @-webkit-keyframes rightfoot{ 0%,50%,100%{
-webkit-transform: rotate(0deg); } 80%{ -webkit-transform:
rotate(10deg); } } .feet .left_foot{ border-bottom-right-radius: 9px;
border-bottom-left-radius: 6px; left:130px; -webkit-transform-origin:
left top; -webkit-animation: leftfoot .8s ease-in-out infinite; }
@-webkit-keyframes leftfoot{ 0%,50%,100%{ -webkit-transform:
rotate(0deg); } 30%{ -webkit-transform: rotate(-10deg); } } .feet
.left_foot:after, .feet .right_foot:after{ content: ”; width: 60px;
height: 35px; border-radius: 20px 10px 21px 15px; background: #000;
position: absolute; left:-36px; top:14.4px;
-webkit-transform:rotate(5deg); } .feet .left_foot:after{
border-radius: 10px 20px 15px 21px; left:13px;
-webkit-transform:rotate(-5deg); } .groundShadow{ width: 200px; height:
2px; border-radius: 50%; background: rgba(0,0,0,0.3); box-shadow: 0 0
2px 4px rgba(0,0,0,0.3); position: relative; top: 455px; left:25px; }
View Code

 

相册演示的代码可以在演示中下载到。

1.3、帮忙文档与读书

高于的支援文档是最好的求学资料,CSS2的声援,极度详细:

亚洲必赢官网 39

CSS3的提携文档:

亚洲必赢官网 40

如上的三个文档及越来越多的帮扶将一并放在项目示范中,请下载示例。

1.3、辅助文档与上学

高于的增援文档是最好的就学资料,CSS2的扶植,至极详尽:

亚洲必赢官网 41

CSS3的帮带文档:

亚洲必赢官网 42

亚洲必赢官网 43

 

点击下载襄助文档

二、选择器

在运用CSS时大家率先要做的工作是找到元素,在写相应的样式,在CSS2.1中最常使用的是二种选取器:

a)、ID选择器:以#起来,引用时采纳id,如id=”div1″

#div1

{

   color:red;

}

b)、类拔取器:以.发轫,使用class属性引用,可以有多少个,如class=”cls1 cls2
cls3″

.cls1

{

   background-color:#99ccff;

}

c)、标签拔取器:以标签名称开头,如p,span,div,*

div span

{

   font-size:14px;

}

当然还有如伪类选择,a:hover,a:link,a:visted,a:active。

在CSS3中新增了不少的接纳器,假若大家会jQuery,jQuery中大部分拔取器在CSS3中都可以一向动用。

二、选择器

在接纳CSS时大家先是要做的业务是找到元素,在写相应的体制,在CSS2.1中最常使用的是两种采纳器:

a)、ID选择器:以#初步,引用时选择id,如id=”div1″

#div1

{

   color:red;

}

b)、类选取器:以.早先,使用class属性引用,可以有七个,如class=”cls1 cls2
cls3″

.cls1

{

   background-color:#99ccff;

}

c)、标签选拔器:以标签名称伊始,如p,span,div,*

div span

{

   font-size:14px;

}

自然还有如伪类选用,a:hover,a:link,a:visted,a:active。

在CSS3中新增了过多的接纳器,若是大家会jQuery,jQuery中大部选拔器在CSS3中都能够一贯使用。

1.1、基础的选拔器

亚洲必赢官网 44

革命字体中选取器的不相同是:p.info的意思是p元素中必须有class=”info”属性将被挑选,p
.info是选项后代元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>选择器</title>
        <style type="text/css">
            p.info{
                color: red;
            }
            p .info{
                color: blue;
            }
        </style>
    </head>
    <body>
        <h2>选择器</h2>
        <p class="info">p1</p>
        <p>
                span1
                <p>p3</p>
        </p>
    </body>
</html>

 

亚洲必赢官网 45

1.2、组合采用器

亚洲必赢官网 46

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>组合选择器</title>
        <style type="text/css">
             #div1 span
             {
                 color: red;
             }
        </style>
    </head>
    <body>
        <h2>组合选择器</h2>
        <div id="div1">
            span1
            <div id="div2">
                span2
            </div>
        </div>
        span3
    </body>
</html>

1.1、基础的选取器

亚洲必赢官网 47

灰色字体中选拔器的分裂是:p.info的趣味是p元素中必须有class=”info”属性将被挑选,p
.info是选项后代元素,示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>选择器</title>
        <style type="text/css">
            p.info{
                color: red;
            }
            p .info{
                color: blue;
            }
        </style>
    </head>
    <body>
        <h2>选择器</h2>
        <p class="info">p1</p>
        <p>
                span1
                <p>p3</p>
        </p>
    </body>
</html>

 运行结果:

亚洲必赢官网 48

亚洲必赢官网 49

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>组合选择器</title>
        <style type="text/css">
             #div1 > span
             {
                 color: red;
             }
        </style>
    </head>
    <body>
        <h2>组合选择器</h2>
        <div id="div1">
            span1
            <div id="div2">
                span2
            </div>
        </div>
        span3
    </body>
</html>

亚洲必赢官网 50

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>组合选择器</title>
        <style type="text/css">
             #div1 + span
             {
                 color: red;
             }
        </style>
    </head>
    <body>
        <h2>组合选择器</h2>
        <div id="div1">
            span1
            <div id="div2">
                span2
            </div>
        </div>
        span3
        span4
    </body>
</html>

 

亚洲必赢官网 51

1.2、组合选用器

亚洲必赢官网 52

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>组合选择器</title>
        <style type="text/css">
             #div1 span
             {
                 color: red;
             }
        </style>
    </head>
    <body>
        <h2>组合选择器</h2>
        <div id="div1">
            span1
            <div id="div2">
                span2
            </div>
        </div>
        span3
    </body>
</html>

运作结果:

亚洲必赢官网 53

 示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>组合选择器</title>
        <style type="text/css">
             #div1 > span
             {
                 color: red;
             }
        </style>
    </head>
    <body>
        <h2>组合选择器</h2>
        <div id="div1">
            span1
            <div id="div2">
                span2
            </div>
        </div>
        span3
    </body>
</html>

亚洲必赢官网 54

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>组合选择器</title>
        <style type="text/css">
             #div1 + span
             {
                 color: red;
             }
        </style>
    </head>
    <body>
        <h2>组合选择器</h2>
        <div id="div1">
            span1
            <div id="div2">
                span2
            </div>
        </div>
        span3
        span4
    </body>
</html>

亚洲必赢官网 55

1.3、属性选拔器

亚洲必赢官网 56

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>属性选择器</title>
        <style type="text/css">
            div[id][class~=cls1] {
                background: lightgreen;
            }
        </style>
    </head>
    <body>
        <h2>组合选择器</h2>
        span0
        <div id="div1" class="cls1">
            div1
        </div>
        <div id="div2" class="cls1 cls2">
            div2
        </div>
    </body>

</html>

 

亚洲必赢官网 57

1.3、属性选用器

亚洲必赢官网 58

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>属性选择器</title>
        <style type="text/css">
            div[id][class~=cls1] {
                background: lightgreen;
            }
        </style>
    </head>
    <body>
        <h2>组合选择器</h2>
        span0
        <div id="div1" class="cls1">
            div1
        </div>
        <div id="div2" class="cls1 cls2">
            div2
        </div>
    </body>

</html>

 运行结果:

亚洲必赢官网 59

1.4、伪类

亚洲必赢官网 60

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>伪类</title>
        <style type="text/css">
           td:first-child
           {
                 background: lightcoral;
           }
        </style>
    </head>
    <body>
        <h2>组合选择器</h2>
        <table border="1" width="100%">
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
        </table>
        <hr />
        <table border="1" width="100%">
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
        </table>
    </body>

</html>

 

亚洲必赢官网 61

 

 磨炼:完结隔行换色,当鼠标悬停在每一行上时高亮显示为香艳,按下时高亮青色。

亚洲必赢官网 62

        <style type="text/css">
           tr:nth-child(2n+1){
                background:lightblue;
           }
           tr:hover{
               background: yellow;
           }
           tr:active{
               background: orangered;
           }
        </style>

 

1.4、伪类

亚洲必赢官网 63

 示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>伪类</title>
        <style type="text/css">
           td:first-child
           {
                 background: lightcoral;
           }
        </style>
    </head>
    <body>
        <h2>组合选择器</h2>
        <table border="1" width="100%">
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
        </table>
        <hr />
        <table border="1" width="100%">
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
        </table>
    </body>

</html>

 运行结果:

亚洲必赢官网 64

 磨炼:完结隔行换色,当鼠标悬停在每一行上时高亮突显为香艳,按下时高亮灰色。

亚洲必赢官网 65

        <style type="text/css">
           tr:nth-child(2n+1){
                background:lightblue;
           }
           tr:hover{
               background: yellow;
           }
           tr:active{
               background: orangered;
           }
        </style>

1.5、伪元素

亚洲必赢官网 66

1.5、伪元素

亚洲必赢官网 67

业内的伪元素应该利用::,但单:也行,只是为着同盟。

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>伪类</title>
        <style type="text/css">
            a::before {
                content: "网站";
                display: inline-block;
                background: red;
                color: white;
            }
        </style>
    </head>
    <body>
        <h2>伪元素</h2>
        <a href="http://www.baidu.com">百度</a>
        <a href="http://best.cnblogs.com">博客园</a>
    </body>
</html>

运作结果:

亚洲必赢官网 68

三、特殊性

三、特殊性(优先级)

a)、同连串,同级别的体制后者先于前者
b)、ID > 类样式 > 标签 > *
c)、内联>ID选用器>伪类>属性选拔器>类拔取器>标签接纳器>通用选取器(*)>继承的体裁
d)、具体 > 泛化的,特殊性即css优先级
e)、近的 > 远的 (内嵌样式 > 内部样式表 > 外联样式表)

内嵌样式:内嵌在要素中,<span><!DOCTYPE html> <html>
<head> <meta charset=”UTF-8″>
<title>优先级</title> <style type=”text/css”> * {
color: yellow; } p { color: red !important; } .cls1 { color: deeppink; }
.cls2{ color: blueviolet; } #p1{ color:blue; } </style>
</head> <body> <div> <p id=”p1″ class=”cls2 cls1″
style=”color:#ccc”>p1</p> <span>span1</span>
</div> </body> </html>

运转结果:

亚洲必赢官网 69

四、刻度

3.2、总括特殊性值

important > 内嵌 > ID > 类 > 标签 | 伪类 | 属性选择 >
伪对象 > 继承 > 通配符
权重、特殊性总计法:
CSS样式选用器分为4个等级,a、b、c、d
1.只要体制是行内样式(通过Style=“”定义),那么a=1,1,0,0,0
2.b为ID选拔器的总额 0,1,0,0
3.c为属性选拔器,伪类拔取器和class类采用器的数据。0,0,1,0

4.d为标签、伪元素拔取器的多少 0,0,0,1

5.!important 权重最高,比 inline style 还要高

 比如结果为:1093比1100,按位相比,从左到右,只要一位胜出则即刻胜出,否则继续相比较。

亚洲必赢官网 70

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>优先级</title>
        <style type="text/css">
            html body #div1
            {
                background: red;
            }

            .cls1 #div1{  
                background: blue;
            }
        </style>
    </head>
    <body>
        <div class="cls1">
            <div id="div1">div1
            </div>
            <div id="div2">div2
            </div>
        </div>
    </body>
</html>

运转结果:

亚洲必赢官网 71

因为html body #div1的超常规性值为:0102,而.cls1
#div1的万分性值为0110,后者胜出。

五、示例下载

web前端开发者最最注的始末是七个:HTML、CSS与JavaScript,…

四、刻度

在CSS中刻度是用以安装元素尺寸的单位。

非凡规值0可以概括单位。例如:margin:0px可以写成margin:0
有的品质可能允许有负长度值,或者有必然的限制限定。尽管不接济负长度值,那应该变换来可以被援助的方今的一个尺寸值。
长度单位包蕴总结:相对单位和相对单位。
相持长度单位包括有: em, ex, ch, rem, vw, vh, vmax, vmin
纯属长度单位包罗有: cm, mm, q, in, pt, pc, px

 亚洲必赢官网 72

4.1、相对长度单位

1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

4.2、文本相对长度单位

em
相持长度单位。相对于近来目的内文本的字体尺寸。如当前对行内文本的书体尺寸未被人工设置,则相对于浏览器的默许字体尺寸。(相对父元素的字体大小倍数)
body { font-size: 14px; }
h1 { font-size: 16px; }
.size1 p { font-size: 1em; }
.size2 p { font-size: 2em; }
.size3 p { font-size: 3em; }

浏览器的默认字体大小为16像素,浏览器默许样式也称之为user agent
stylesheet,就是有所浏览器内置的默认样式,多数是能够被涂改的,但chrome不可能一向改动,可以被用户样式覆盖。

亚洲必赢官网 73

演示代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>em与rem</title>
        <style type="text/css">
            #div2{
                background: blue;
                height: 5em;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2">
                Hello em
            </div>
        </div>
    </body>
</html>

结果:亚洲必赢官网 74

div2的万丈为80px,是因为user agent
stylesheet默许样式中字体大小为16px,根据这一个规则大家得以手动修改字体大小,div2的莫大将暴发变化。

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>em与rem</title>
        <style type="text/css">
            #div1 {
                font-size: 20px;
            }
            #div2 {
                color: white;
                background: blue;
                height: 5em;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2">
                Hello em
            </div>
        </div>
    </body>
</html>

结果:

亚洲必赢官网 75

rem

rem是CSS3新增的一个针锋相对单位(root
em,根em),相对于根元素(即html元素)font-size计算值的翻番
只相对于根元素的分寸
rem(font size of the root
element)是指相对于根元素的字体大小的单位。一句话来说它就是一个针锋相对单位。看到rem我们自然会想起em单位,em(font
size of the
element)是指相对于父元素的字体大小的单位。它们之间实际很相像,只可是一个乘除的条条框框是依赖根元素一个是借助父元素计算。(相对是的HTML元素的字体大,默许16px)

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>em与rem</title>
        <style type="text/css">
            #div1 {
                font-size: 20px;
            }
            #div2 {
                color: white;
                background: blue;
                height: 5rem;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2">
                Hello em
            </div>
        </div>
    </body>
</html>

 

运行结果:

亚洲必赢官网 76

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>em与rem</title>
        <style type="text/css">
            html {
                font-size: 10px;
            }
            body {
                font-size: 16px;
            }
            #div1 {
                font-size: 20px;
            }
            #div2 {
                color: white;
                background: blue;
                height: 5rem;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2">
                Hello em
            </div>
        </div>
    </body>
</html>

结果:

亚洲必赢官网 77

按说高度为5*10px=50像素中度,但那边为60,是因为chrome浏览器限制了小小字体大小为12px,从上图可以看来。

4.3、Web App与Rem

为了完成简单的响应式布局,可以选用html元素中字体的高低与显示器间的比值设置font-size的值完结当屏幕分辨率变化时让要素也变化,以前的tmall就使用那种措施,示例如下:

亚洲必赢官网 78

示例一:

亚洲必赢官网 79<!DOCTYPE
html> <html> <head> <meta charset=”UTF-8″>
<title>rem phone test</title> <!– 描述:视口 –>
<meta name=”viewport” content=”user-scalable=no, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0″> <style> html { height:
100%; width: 100%; font-family: ‘Heiti SC’, ‘Microsoft YaHei’;
font-size: 20px; overflow: hidden; outline: 0; -webkit-text-size-adjust:
none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; } body {
height: 100%; margin: 0; overflow: hidden; -webkit-user-select: none;
/*裁撤用户挑选*/ width: 100%; } header, footer { width: 100%;
line-height: 1.5rem; font-size: 1rem; color: #000; border: 1px solid
#ccc; text-align: center; background-color: #ccc; } .bd { margin-top:
1rem; margin-bottom: .5rem; margin-right: -.5rem; font-size: 0; }
.bd:after { clear: both; } .box { width: 5rem; height: 5rem; display:
inline-block; margin-right: .5rem; margin-bottom: .5rem; } .blue-box {
background-color: #06c; } .org-box { background-color: #1fc195; }
</style> </head> <body>
<header>我是底部</header> <div class=”bd”> <div
class=”box blue-box”></div> <div class=”box
org-box”></div> <div class=”box blue-box”></div>
<div class=”box org-box”></div> <div class=”box
blue-box”></div> <div class=”box org-box”></div>
<div class=”box blue-box”></div> <div class=”box
org-box”></div> <div class=”box blue-box”></div>
<div class=”box org-box”></div> <div class=”box
blue-box”></div> <div class=”box org-box”></div>
<div class=”box blue-box”></div> <div class=”box
org-box”></div> <div class=”box blue-box”></div>
<div class=”box org-box”></div> <div class=”box
blue-box”></div> <div class=”box org-box”></div>
<div class=”box blue-box”></div> <div class=”box
org-box”></div> <div class=”box blue-box”></div>
<div class=”box org-box”></div> <div class=”box
blue-box”></div> <div class=”box org-box”></div>
</div> <footer>我是页脚</footer> <script> /*
;(function(win){ win.alert(“Hello IIEF”); })(window); */
//定义一个艺术并施行 (function(doc, win) { //获得文档的根节点html var
docEl = doc.documentElement;
//如若window中存在orientationchange对象,则取orientationchange,否则取resize
//为了事件绑定 resizeEvt = ‘orientationchange’ in win ?
‘orientationchange’ : ‘resize’; //定义一个主意,重新总结font-size大小
var recalc = function() { //页面的幅度 var clientWidth =
docEl.clientWidth; //要是没有大幅度则脱离 if (!clientWidth) return;
//重新计算font-size大小,假定320的增幅时字体大小为20;,当页面变化时再一次设置字体大小
docEl.style.fontSize = 20 * (clientWidth / 320) + ‘px’; };
//假使浏览器不协助添加事件监听则停止 if (!doc.add伊夫ntListener) return;
//添加事件监听,指定事件处理函数的时日或阶段(boolean)true表示在破获事件实施,false表示冒泡时执行
win.add伊芙ntListener(resizeEvt, recalc, false);
//当Dom树加载成功时实施计算,DOMContentLoaded事件要在window.onload此前实施
doc.add伊夫ntListener(‘DOMContentLoaded’, recalc, false); })(document,
window); </script> </body> </html> View Code

运作结果:

 亚洲必赢官网 80

亚洲必赢官网 81

示例二:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>web app 与rem</title>
        <style type="text/css">
            html {
                font-size: 20px;
            }
            body {
                font-size: 16px;
            }
            #div2 {
                color: white;
                background: blue;
                height: 3rem;
                width: 3rem;
                font-size: .7rem;
            }
        </style>
    </head>

    <body>
        <div id="div2">
            Hello rem
        </div>
        <script type="text/javascript">
            function resize() {
                var w = document.documentElement.clientWidth;
                document.documentElement.style.fontSize = w * 20 / 290 + "px";
            }
            window.onresize =resize;

            resize();
        </script>
    </body>

</html>

 

运作结果:

 亚洲必赢官网 82

亚洲必赢官网 83

变显示器变宽时元素大小也随即发生变化,但那边并从未设想中度,但为响应式布局与hack提供了思路。

五、示例与赞助下载

 支持文档与示范下载

参照:

亚洲必赢官网 84

web前端开发者最最注的内容是七个:HTML、CSS与JavaScri…

网站地图xml地图