澳门新萄京官方网站-www.8455.com-澳门新萄京赌场网址

澳门新萄京官方网站css3实现的小丸子和爷爷,特

2019-09-28 作者:澳门新萄京赌场网址   |   浏览(51)

纯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 ,这么丑,别急,渐渐让它活过来:

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 那样就对了,看着多舒服啊!不蔓不枝,做脖子和人体:

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; } /*掩盖口袋50%*/ .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

HTML代码

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小丸子一家</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="main">
<div class="me">
<div class="hairs">
<div class="hair hair1"></div>
<div class="hair hair2"></div>
<div class="hair hair3"></div>
<div class="hair hair4"></div>
<div class="hair hair5"></div>
<div class="hair hair6"></div>
<div class="hair hair7"></div>
</div>

1.1、特点

1.1、特点

<div class="face">
<div class="brow left-brow"></div>
<div class="brow right-brow"></div>
<div class="eye left-eye"></div>
<div class="eye right-eye"></div>

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

 

相册演示的代码能够在演示中下载到。

<div class="blusher left-blusher"></div>
<div class="blusher right-blusher"></div>

1.3、帮忙文书档案与读书

高于的帮扶文书档案是最佳的学习资料,CSS2的帮助,非常详尽:

澳门新萄京官方网站 39

CSS3的救助文书档案:

澳门新萄京官方网站 40

上述的七个文书档案及更多的增加援救将共同放在项目示范中,请下载示例。

1.3、扶助文档与学习

权威的相助文书档案是最棒的求学资料,CSS2的帮扶,特别详尽:

澳门新萄京官方网站 41

CSS3的赞助文书档案:

澳门新萄京官方网站 42

澳门新萄京官方网站 43

 

点击下载协理文书档案

<div class="mouth"></div>

二、选择器

在运用CSS时大家率先要做的事体是找到成分,在写相应的样式,在CSS2.第11中学最常使用的是三种选取器:

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.第11中学最常使用的是三种采取器:

a)、ID选择器:以#发端,引用时利用id,如id="div1"

#澳门新萄京官方网站css3实现的小丸子和爷爷,特殊性与刻度单位。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中都能够平素动用。

<div class="ear left-ear"></div>
<div class="ear right-ear"></div>
</div>

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

<div class="clothes">
<div class="collar left-collar"></div>
<div class="collar right-collar"></div>
<div class="straps left-straps"></div>
<div class="straps right-straps"></div>
</div>

澳门新萄京官方网站 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

<div class="arm left-arm"></div>
<div class="arm right-arm"></div>

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

<div class="belt"></div>
<div class="skirt">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
<div class="line line4"></div>
<div class="line line5"></div>
</div>
<div class="leg left-leg"></div>
<div class="leg right-leg"></div>

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>

<div class="stockings left-stockings"></div>
<div class="stockings right-stockings"></div>

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

<div class="shoes left-shoes"></div>
<div class="shoes right-shoes"></div>
</div>

三、特殊性

三、特殊性(优先级)

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

<div class="grandpa">
<div class="hairs">
<div class="hair hair1"></div>
<div class="hair hair2"></div>
<div class="hair hair3"></div>
<div class="hair hair4"></div>
<div class="hair hair5"></div>
</div>
<div class="ear left-ear"></div>
<div class="ear right-ear"></div>
<div class="header">

四、刻度

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,后面一个胜出。

<div class="bangs">
<div class="bang bang1"></div>
<div class="bang bang2"></div>
<div class="bang bang3"></div>
</div>

五、示例下载

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

<div class="wrinkle wrinkle1"></div>
<div class="wrinkle wrinkle2"></div>

4.1、绝对长度单位

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

<div class="brow left-brow"></div>
<div class="brow right-brow"></div>

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,从上航海用教室能够看来。

<div class="eye left-eye"></div>
<div class="eye right-eye"></div>

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.addEventListener) return; //增添事件监听,内定事件管理函数的时期或阶段(boolean)true表示在抓获事件实行,false表示冒泡时施行win.add伊夫ntListener(resizeEvt, recalc, false); //当Dom树加载成功时实行总括,DOMContentLoaded事件要在window.onload在此之前实践doc.addEventListener('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提供了思路。

<div class="nose"></div>

五、示例与赞助下载

 援助文书档案与示范下载

参照:

澳门新萄京官方网站 84

web前端开采者最最注的内容是八个:HTML、CSS与JavaScri...

<div class="mouth"></div>
</div>

<div class="clothes">
<div class="collar"></div>
<div class="cover"></div>
</div>
<div class="hand"></div>

<div class="trousers"></div>
<div class="footer left-footer"></div>
<div class="footer right-footer"></div>
<div class="shoes left-shoes"></div>
<div class="shoes right-shoes"></div>

</div>

</div>
</body>
</html>

 

 CSS代码

@-webkit-keyframes eye {
/* line 2, main.less */
0% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
/* line 5, main.less */
20% {
-webkit-transform: scale(1, 0.1);
transform: scale(1, 0.1);
}
/* line 9, main.less */
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
@keyframes eye {
/* line 2, main.less */
0% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
/* line 5, main.less */
20% {
-webkit-transform: scale(1, 0.1);
transform: scale(1, 0.1);
}
/* line 9, main.less */
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
/* line 13, main.less */
body {
background: #ffef5e;
}
/* line 16, main.less */
body,
div {
margin: 0;
padding: 0;
background: #ffef5e;
}
/* line 21, main.less */
.border {
border: 1px solid #152131;
}
/* line 24, main.less */
.main {
position: relative;
width: 700px;
margin: 50px auto;
}
/* line 29, main.less */
.me {
position: absolute;
top: 250px;
left: 100px;
z-index: 10;
}
/* line 34, main.less */
.me .hairs {
background: #152131;
width: 190px;
height: 250px;
border-radius: 50% 50% 0 0;
left: -30px;
top: -50px;
position: absolute;
overflow: hidden;
}
/* line 43, main.less */
.me .hairs:after {
content: '';
position: absolute;
width: 300px;
height: 200px;
background: #ffef5e;
top: 120px;
}
/* line 51, main.less */
.me .hairs .hair {
width: 35px;
height: 45px;
background: #152131;
position: absolute;
z-index: 1;
-webkit-transform: rotate(70deg) scale(1) skew(44deg) translate(8px);
-ms-transform: rotate(70deg) scale(1) skew(44deg) translate(8px);
transform: rotate(70deg) scale(1) skew(44deg) translate(8px);
}
/* line 58, main.less */
.me .hairs .hair.hair1 {
top: 17px;
left: 27px;
}
/* line 62, main.less */
.me .hairs .hair.hair2 {
top: 8px;
left: 52px;
}
/* line 66, main.less */
.me .hairs .hair.hair3 {
top: 4px;
left: 73px;
}
/* line 70, main.less */
.me .hairs .hair.hair4 {
top: 0;
left: 90px;
}
/* line 74, main.less */
.me .hairs .hair.hair5 {
top: 4px;
left: 108px;
}
/* line 78, main.less */
.me .hairs .hair.hair6 {
top: 8px;
left: 125px;
}
/* line 82, main.less */
.me .hairs .hair.hair7 {
top: 17px;
right: 17px;
}
/* line 88, main.less */
.me .face {
background: #fbdac7;
width: 130px;
height: 100px;
position: absolute;
top: 0;
border-radius: 20px 20px 50px 50px;
border: 1px solid #152131;
}
/* line 95, main.less */
.me .face:after {
content: "";
width: 14px;
height: 10px;
background: #fbdac7;
position: absolute;
bottom: -12px;
left: 50%;
margin-left: -7px;
border: 1px solid #152131;
}
/* line 107, main.less */
.me .face .brow {
width: 42px;
height: 10px;
background: #152131;
position: absolute;
top: 26px;
border-radius: 50%;
}
/* line 114, main.less */
.me .face .brow:after {
content: "";
background: #fbdac7;
position: absolute;
width: 50px;
height: 10px;
top: 1px;
border-radius: 50%;
}
/* line 123, main.less */
.me .face .brow.left-brow {
left: 18px;
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
/* line 127, main.less */
.me .face .brow.right-brow {
right: 14px;
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
/* line 132, main.less */
.me .face .eye {
width: 14px;
height: 14px;
border-radius: 50%;
background: #000;
position: absolute;
top: 40px;
z-index: 2;
}
/* line 140, main.less */
.me .face .eye.left-eye {
left: 32%;
}
/* line 143, main.less */
.me .face .eye.right-eye {
right: 32%;
}
/* line 148, main.less */
.me .face .blusher {
width: 12px;
height: 12px;
border-radius: 50%;
background: #f79c99;
position: absolute;
top: 70px;
}
/* line 155, main.less */
.me .face .blusher.left-blusher {
left: 8px;
}
/* line 158, main.less */
.me .face .blusher.right-blusher {
right: 8px;
}
/* line 162, main.less */
.me .face .mouth {
border: 1px solid #152131;
z-index: 1;
width: 30px;
height: 30px;
background: #d96b6e;
position: absolute;
top: 50px;
left: 50px;
border-radius: 50%;
}
/* line 172, main.less */
.me .face .mouth:after {
content: "";
width: 60px;
height: 30px;
background: #fbdac7;
position: absolute;
top: -10px;
left: -20px;
border-radius: 30%;
}
/* line 183, main.less */
.me .face .ear {
width: 10px;
height: 20px;
background: #fbdac7;
position: absolute;
top: 30px;
z-index: 2;
}
/* line 190, main.less */
.me .face .ear.left-ear {
left: -11px;
border-radius: 5px 0 0 10px;
}
/* line 194, main.less */
.me .face .ear.right-ear {
right: -11px;
border-radius: 0 5px 10px 0;
}
/* line 200, main.less */
.me .clothes {
background: #fff;
width: 70px;
height: 80px;
position: absolute;
top: 112px;
left: 31px;
z-index: 2;
border-radius: 30% 30% 10px 10px;
overflow: hidden;
border: 1px solid #152131;
}
/* line 211, main.less */
.me .clothes .sleeve {
background: #fff;
width: 40px;
height: 40px;
position: absolute;
top: 10px;
border-radius: 10px;
}
/* line 231, main.less */
.me .clothes .collar {
z-index: 3;
position: absolute;
border: 1px solid #152131;
width: 20px;
height: 10px;
background: #fff;
}
/* line 238, main.less */
.me .clothes .collar.left-collar {
left: 12px;
-webkit-transform: rotate(50deg);
-ms-transform: rotate(50deg);
transform: rotate(50deg);
}
/* line 242, main.less */
.me .clothes .collar.right-collar {
right: 12px;
-webkit-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
transform: rotate(-50deg);
}
/* line 247, main.less */
.me .clothes .straps {
z-index: 2;
position: absolute;
width: 6px;
height: 100px;
background: #e9003a;
border: 1px solid #152131;
}
/* line 254, main.less */
.me .clothes .straps.left-straps {
left: 12px;
}
/* line 257, main.less */
.me .clothes .straps.right-straps {
right: 12px;
}
/* line 262, main.less */
.me .arm {
width: 70px;
height: 70px;
border-radius: 50%;
background: #fff;
border: 1px solid #152131;
z-index: 1;
position: absolute;
top: 115px;
z-index: 0;
}
/* line 272, main.less */
.me .arm.left-arm {
left: 10px;
}
/* line 274, main.less */
.me .arm.left-arm:after {
content: "";
position: absolute;
background: #ffef5e;
width: 60px;
height: 60px;
left: 12px;
top: 5px;
border-radius: 50%;
border: 1px solid #152131;
}
/* line 286, main.less */
.me .arm.right-arm {
left: 52px;
}
/* line 288, main.less */
.me .arm.right-arm:after {
content: "";
position: absolute;
background: #ffef5e;
width: 60px;
height: 60px;
left: -4px;
top: 5px;
border-radius: 50%;
border: 1px solid #152131;
}
/* line 301, main.less */
.me .belt {
background: #ed023a;
border: 1px solid #152131;
height: 10px;
left: 31px;
position: absolute;
top: 182px;
width: 70px;
z-index: 3;
}
/* line 311, main.less */
.me .skirt {
background: #ed023a;
background: none;
border-color: #e9003a transparent;
-webkit-border-image: none;
-o-border-image: none;
border-image: none;
border-style: solid;
border-width: 0px 30px 50px;
height: 0;
left: 1px;
position: absolute;
top: 194px;
width: 72px;
z-index: 3;
border-radius: 0 0 50% 50%;
}
/* line 326, main.less */
.me .skirt .line {
width: 1px;
height: 30px;
position: absolute;
background: #000;
top: 10px;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
/* line 333, main.less */
.me .skirt .line.line1 {
left: 10px;
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
/* line 337, main.less */
.me .skirt .line.line2 {
left: 25px;
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
/* line 341, main.less */
.me .skirt .line.line3 {
left: 35px;
}
/* line 344, main.less */
.me .skirt .line.line4 {
right: 25px;
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
/* line 348, main.less */
.me .skirt .line.line5 {
right: 10px;
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);
}
/* line 354, main.less */
.me .leg {
width: 12px;
height: 40px;
background: #fadbc7;
border: 1px solid #152131;
position: absolute;
top: 220px;
z-index: 2;
}
/* line 362, main.less */
.me .leg.left-leg {
left: 40px;
}
/* line 365, main.less */
.me .leg.right-leg {
left: 78px;
}
/* line 368, main.less */
.me .leg:after {
content: '';
width: 12px;
height: 16px;
background: #fff;
border: 1px solid #152131;
border-bottom: 0;
top: 40px;
left: -1px;
position: absolute;
}
/* line 380, main.less */
.me .stockings {
width: 28px;
height: 12px;
background: #fff;
border: 1px solid #152131;
position: absolute;
z-index: 1;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
/* line 388, main.less */
.me .stockings.left-stockings {
left: 21px;
top: 275px;
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);
border-radius: 50% 0 0 50%;
}
/* line 394, main.less */
.me .stockings.right-stockings {
left: 83px;
top: 265px;
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
border-radius: 0 50% 50% 0;
}
/* line 401, main.less */
.me .shoes {
width: 40px;
height: 17px;
position: absolute;
z-index: 0;
background: #a23030;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
border-radius: 50%;
}
/* line 409, main.less */
.me .shoes.left-shoes {
left: 13px;
top: 280px;
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);
border-radius: 50% 0 0 50%;
}
/* line 415, main.less */
.me .shoes.right-shoes {
left: 81px;
top: 267px;
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
border-radius: 0 50% 50% 0;
}
/* line 424, main.less */
.grandpa {
position: absolute;
top: 40px;
left: 280px;
z-index: 10;
width: 126px;
}
/* line 430, main.less */
.grandpa .hairs {
position: absolute;
z-index: 3;
width: 126px;
}
/* line 435, main.less */
.grandpa .hairs .hair {
background: #152131;
width: 1px;
height: 5px;
position: absolute;
}
/* line 440, main.less */
.grandpa .hairs .hair.hair1 {
left: 40px;
top: 12px;
}
/* line 444, main.less */
.grandpa .hairs .hair.hair2 {
left: 50px;
top: 8px;
}
/* line 448, main.less */
.grandpa .hairs .hair.hair3 {
left: 62px;
top: 5px;
}
/* line 452, main.less */
.grandpa .hairs .hair.hair4 {
right: 50px;
top: 8px;
}
/* line 456, main.less */
.grandpa .hairs .hair.hair5 {
right: 40px;
top: 12px;
}
/* line 462, main.less */
.grandpa .ear {
width: 20px;
height: 20px;
background: #f8bb9f;
border: 1px solid #152131;
position: absolute;
top: 90px;
border-radius: 50%;
z-index: 1;
}
/* line 471, main.less */
.grandpa .ear.left-ear {
left: -10px;
}
/* line 474, main.less */
.grandpa .ear.right-ear {
right: -10px;
}
/* line 478, main.less */
.grandpa .header {
top: 10px;
position: absolute;
width: 126px;
height: 180px;
background: #f8bb9f;
display: block;
border-radius: 175% 175% 150% 150%;
z-index: 2;
border: 1px solid #152131;
}
/* line 488, main.less */
.grandpa .header:after {
background: #f8bb9f;
bottom: -12px;
content: "";
height: 10px;
left: 50%;
margin-left: -7px;
position: absolute;
width: 14px;
border: 1px solid #152131;
}
/* line 499, main.less */
.grandpa .header .bang {
background: #152131;
width: 1px;
height: 3px;
position: absolute;
z-index: 1;
top: 12px;
}
/* line 506, main.less */
.grandpa .header .bang.bang1 {
left: 50px;
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);
}
/* line 510, main.less */
.grandpa .header .bang.bang2 {
left: 63px;
}
/* line 513, main.less */
.grandpa .header .bang.bang3 {
right: 50px;
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
/* line 518, main.less */
.grandpa .header .wrinkle {
position: absolute;
height: 1px;
background: #152131;
border-radius: 50%;
}
/* line 523, main.less */
.grandpa .header .wrinkle.wrinkle1 {
top: 30px;
width: 30px;
left: 48px;
}
/* line 528, main.less */
.grandpa .header .wrinkle.wrinkle2 {
top: 40px;
width: 20px;
left: 53px;
}
/* line 534, main.less */
.grandpa .header .brow {
position: absolute;
top: 60px;
width: 50px;
height: 30px;
border-radius: 50%;
background: #152131;
}
/* line 541, main.less */
.grandpa .header .brow:after {
content: "";
position: absolute;
border-radius: 50%;
width: 60px;
height: 30px;
background: #f8bb9f;
top: 1px;
left: -1px;
}
/* line 551, main.less */
.grandpa .header .brow.left-brow {
left: 20px;
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
/* line 555, main.less */
.grandpa .header .brow.right-brow {
left: 67px;
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
/* line 560, main.less */
.grandpa .header .eye {
position: absolute;
top: 80px;
width: 30px;
height: 50px;
border-radius: 50%;
background: #152131;
}
/* line 568, main.less */
.grandpa .header .eye:after {
content: "";
position: absolute;
border-radius: 50%;
width: 34px;
height: 55px;
background: #f8bb9f;
top: 1px;
left: 0px;
}
/* line 578, main.less */
.grandpa .header .eye.left-eye {
left: 20px;
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
/* line 583, main.less */
.grandpa .header .eye.right-eye {
left: 80px;
top: 79px;
-webkit-transform: rotate(-40deg) rotateY(160deg);
transform: rotate(-40deg) rotateY(160deg);
}
/* line 589, main.less */
.grandpa .header .nose {
width: 6px;
height: 22px;
position: absolute;
top: 105px;
left: 58px;
background: #f8bb9f;
z-index: 2;
border: 1px solid #152131;
border-radius: 50%;
}
/* line 599, main.less */
.grandpa .header .nose:after {
content: "";
position: absolute;
width: 4px;
height: 22px;
top: -5px;
left: 1px;
background: #f8bb9f;
}
/* line 609, main.less */
.grandpa .header .mouth {
border: 1px solid #152131;
z-index: 1;
width: 30px;
height: 30px;
background: #d96b6e;
position: absolute;
top: 130px;
left: 46px;
border-radius: 50%;
}
/* line 619, main.less */
.grandpa .header .mouth:after {
content: "";
width: 60px;
height: 30px;
background: #f8bb9f;
position: absolute;
top: -10px;
left: -20px;
border-radius: 50%;
}
/* line 632, main.less */
.grandpa .clothes {
background: #a5d1d2;
width: 100px;
position: absolute;
top: 200px;
height: 130px;
left: 14px;
border-radius: 50% 50% 10% 10%;
z-index: 2;
border: 1px solid #152131;
}
/* line 642, main.less */
.grandpa .clothes .cover {
border-radius: 50% 50% 10% 10%;
width: 102px;
height: 60px;
background: #a5d1d2;
position: absolute;
top: 0;
z-index: 3;
}
/* line 651, main.less */
.grandpa .clothes .collar {
border-radius: 50% 50% 10% 10%;
height: 130px;
width: 100px;
position: absolute;
z-index: 4;
background: #a5d1d2;
overflow: hidden;
}
/* line 659, main.less */
.grandpa .clothes .collar:after {
content: "";
position: absolute;
width: 40px;
height: 40px;
border-radius: 50%;
background: #a5d1d2;
left: 30px;
top: -20px;
border: 1px solid #152131;
z-index: 5;
}
/* line 673, main.less */
.grandpa .hand {
z-index: 1;
background: #a5d1d2;
border: 1px solid #152131;
border-radius: 90% 90% 50% 50%;
height: 110px;
left: -13px;
position: absolute;
top: 200px;
width: 150px;
}
/* line 685, main.less */
.grandpa .trousers {
border: 1px solid #152131;
height: 140px;
left: 16px;
position: absolute;
top: 331px;
width: 96px;
background: #6c8d6e;
}
/* line 693, main.less */
.grandpa .trousers:after {
content: "";
-webkit-transform: rotate(82deg) scale(0.825) skew(70deg) translate(0px);
-ms-transform: rotate(82deg) scale(0.825) skew(70deg) translate(0px);
transform: rotate(82deg) scale(0.825) skew(70deg) translate(0px);
width: 400px;
background: #ffef5e;
height: 100px;
left: -152px;
position: absolute;
top: 250px;
}
/* line 705, main.less */
.grandpa .footer {
width: 30px;
height: 15px;
background: #a18883;
position: absolute;
top: 473px;
}
/* line 711, main.less */
.grandpa .footer.left-footer {
width: 25px;
left: 16px;
}
/* line 715, main.less */
.grandpa .footer.right-footer {
left: 84px;
}
/* line 719, main.less */
.grandpa .shoes {
width: 45px;
height: 18px;
position: absolute;
top: 483px;
background: #555a6d;
}
/* line 725, main.less */
.grandpa .shoes.left-shoes {
border-radius: 50% 0 30% 50%;
left: -4px;
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
/* line 730, main.less */
.grandpa .shoes.right-shoes {
border-radius: 0 50% 50% 30%;
left: 84px;
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}

less代码

@keyframes eye {
0% {
transform:scale(1,1);
}
20% {
transform:scale(1,0.1);
}

100% {
transform:scale(1,1);
}
}
body{
background: #ffef5e;
}
body,div{
margin: 0;
padding: 0;
background: #ffef5e;
}
.border{
border:1px solid #152131;
}
.main{
position: relative;
width: 700px;
margin: 50px auto;
}
.me{
position: absolute;
top: 250px;
left: 100px;
z-index: 10;
.hairs{
background: #152131;
width: 190px;
height: 250px;
border-radius: 50% 50% 0 0;
left: -30px;
top: -50px;
position: absolute;
overflow: hidden;
&:after{
content: '';
position: absolute;
width: 300px;
height: 200px;
background: #ffef5e;
top: 120px;
}
.hair{
width: 35px;
height: 45px;
background: #152131;
position: absolute;
z-index: 1;
transform: rotate(70deg) scale(1) skew(44deg) translate(8px);
&.hair1{
top: 17px;
left: 27px;
}
&.hair2{
top: 8px;
left: 52px;
}
&.hair3{
top: 4px;
left: 73px;
}
&.hair4{
top: 0;
left: 90px;
}
&.hair5{
top: 4px;
left:108px;
}
&.hair6{
top: 8px;
left: 125px;
}
&.hair7{
top: 17px;
right: 17px;
}
}
}
.face{
background: #fbdac7;
width: 130px;
height: 100px;
position: absolute;
top: 0;
border-radius: 20px 20px 50px 50px;
&:after{ //脖子
content: "";
width: 14px;
height: 10px;
background: #fbdac7;
position: absolute;
bottom:-12px;
left: 50%;
margin-left: -7px;
.border;
}
.border;
.brow{
width: 42px;
height: 10px;
background: #152131;
position: absolute;
top: 26px;
border-radius: 50%;
&:after{
content: "";
background: #fbdac7;
position: absolute;
width: 50px;
height: 10px;
top: 1px;
border-radius: 50%;
}
&.left-brow{
left : 18px;
transform:rotate(-10deg);
}
&.right-brow{
right: 14px;
transform:rotate(10deg);
}
}
.eye{
width: 14px;
height: 14px;
border-radius: 50%;
background: #000;
position: absolute;
top: 40px;
z-index: 2;
&.left-eye{
left: 32%;
}
&.right-eye{
right: 32%;
//animation: eye 1s infinite ease;
}
}
.blusher{
width: 12px;
height: 12px;
border-radius: 50%;
background: #f79c99;
position: absolute;
top: 70px;
&.left-blusher{
left: 8px;
}
&.right-blusher{
right: 8px;
}
}
.mouth{
.border;
z-index: 1;
width: 30px;
height: 30px;
background: #d96b6e;
position: absolute;
top: 50px;
left: 50px;
border-radius: 50%;
&:after{
content: "";
width: 60px;
height: 30px;
background: #fbdac7;
position: absolute;
top: -10px;
left: -20px;
border-radius: 30%;
}
}
.ear{
width: 10px;
height: 20px;
background: #fbdac7;
position: absolute;
top: 30px;
z-index: 2;
&.left-ear{
left: -11px;
border-radius: 5px 0 0 10px;
}
&.right-ear{
right: -11px;
border-radius: 0 5px 10px 0;
}
}
}
.clothes{
background: #fff;
width: 70px;
height: 80px;
position: absolute;
top:112px;
left: 31px;
z-index: 2;
border-radius: 30% 30% 10px 10px;
overflow: hidden;
.border;
.sleeve{
background: #fff;
width: 40px;
height: 40px;
position: absolute;
top: 10px;
border-radius: 10px;
}
// &:before{ //左袖子
// content: "";
// .sleeve;
// left: -10px;
// transform:rotate(50deg);
// }
// &:after{ //右袖子
// content :"";
// .sleeve;
// right: -10px;
// transform:rotate(-50deg);
// }
.collar{
z-index: 3;
position: absolute;
.border;
width: 20px;
height: 10px;
background: #fff;
&.left-collar{
left: 12px;
transform:rotate(50deg);
}
&.right-collar{
right: 12px;
transform:rotate(-50deg);
}
}
.straps{
z-index: 2;
position: absolute;
width: 6px;
height: 100px;
background: #e9003a;
.border;
&.left-straps{
left: 12px;
}
&.right-straps{
right: 12px;
}
}
}
.arm{
width: 70px;
height: 70px;
border-radius: 50%;
background: #fff;
.border;
z-index: 1;
position: absolute;
top: 115px;
z-index: 0;
&.left-arm{
left: 10px;
&:after{
content: "";
position: absolute;
background:#ffef5e;
width: 60px;
height: 60px;
left: 12px;
top: 5px;
border-radius: 50%;
.border;
}
}
&.right-arm{
left: 52px;
&:after{
content: "";
position: absolute;
background:#ffef5e;
width: 60px;
height: 60px;
left: -4px;
top: 5px;
border-radius: 50%;
.border;
}
}
}
.belt{
background: #ed023a;
border: 1px solid #152131;
height: 10px;
left: 31px;
position: absolute;
top: 182px;
width: 70px;
z-index: 3;
}
.skirt{
background: #ed023a;
position: absolute;
background: none;
border-color: #e9003a transparent;
border-image: none;
border-style: solid;
border-width: 0px 30px 50px;
height: 0;
left: 1px;
position: absolute;
top: 194px;
width: 72px;
z-index: 3;
border-radius: 0 0 50% 50%;
.line{
width: 1px;
height: 30px;
position: absolute;
background: #000;
top:10px;
transform-origin:0 0;
&.line1{
left: 10px;
transform:rotate(20deg);
}
&.line2{
left: 25px;
transform:rotate(10deg);
}
&.line3{
left: 35px;
}
&.line4{
right: 25px;
transform:rotate(-10deg);
}
&.line5{
right: 10px;
transform:rotate(-20deg);
}
}
}
.leg{
width: 12px;
height: 40px;
background: #fadbc7;
.border;
position: absolute;
top: 220px;
z-index: 2;
&.left-leg{
left: 40px;
}
&.right-leg{
left: 78px;
}
&:after{
content: '';
width: 12px;
height: 16px;
background: #fff;
.border;
border-bottom: 0;
top: 40px;
left: -1px;
position: absolute;
}
}
.stockings{
width: 28px;
height: 12px;
background: #fff;
.border;
position: absolute;
z-index: 1;
transform-origin:0 0;
&.left-stockings{
left: 21px;
top: 275px;
transform:rotate(-20deg);
border-radius: 50% 0 0 50%;
}
&.right-stockings{
left: 83px;
top: 265px;
transform:rotate(20deg);
border-radius: 0 50% 50% 0;
}
}
.shoes{
width: 40px;
height: 17px;
position: absolute;
z-index: 0;
background: #a23030;
transform-origin:0 0;
border-radius: 50%;
&.left-shoes{
left: 13px;
top: 280px;
transform:rotate(-20deg);
border-radius: 50% 0 0 50%;
}
&.right-shoes{
left: 81px;
top: 267px;
transform:rotate(20deg);
border-radius: 0 50% 50% 0;
}
}
}

.grandpa{
position: absolute;
top: 40px;
left: 280px;
z-index: 10;
width: 126px;
.hairs{
position: absolute;

z-index: 3;
width: 126px;
.hair{
background: #152131;
width: 1px;
height: 5px;
position: absolute;
&.hair1{
left: 40px;
top: 12px;
}
&.hair2{
left: 50px;
top: 8px;
}
&.hair3{
left: 62px;
top: 5px;
}
&.hair4{
right: 50px;
top: 8px;
}
&.hair5{
right: 40px;
top: 12px;
}
}
}
.ear{
width: 20px;
height: 20px;
background: #f8bb9f;
.border;
position: absolute;
top: 90px;
border-radius: 50%;
z-index: 1;
&.left-ear{
left: -10px;
}
&.right-ear{
right: -10px;
}
}
.header{
top: 10px;
position: absolute;
width: 126px;
height: 180px;
background: #f8bb9f;
display: block;
border-radius: 175% 175% 150% 150%;
z-index: 2;
.border;
&:after{
background: #f8bb9f;
bottom: -12px;
content: "";
height: 10px;
left: 50%;
margin-left: -7px;
position: absolute;
width: 14px;
.border;
}
.bang{
background: #152131;
width: 1px;
height: 3px;
position: absolute;
z-index: 1;
top: 12px;
&.bang1{
left: 50px;
transform:rotate(-20deg);
}
&.bang2{
left: 63px;
}
&.bang3{
right:50px;
transform:rotate(20deg);
}
}
.wrinkle{
position: absolute;
height: 1px;
background: #152131;
border-radius: 50%;
&.wrinkle1{
top: 30px;
width:30px;
left: 48px;
}
&.wrinkle2{
top: 40px;
width:20px;
left: 53px;
}
}
.brow{
position: absolute;
top: 60px;
width: 50px;
height: 30px;
border-radius: 50%;
background: #152131;
&:after{
content: "";
position: absolute;
border-radius: 50%;
width: 60px;
height: 30px;
background: #f8bb9f;
top: 1px;
left: -1px;
}
&.left-brow{
left: 20px;
transform:rotate(10deg);
}
&.right-brow{
left: 67px;
transform:rotate(10deg);
}
}
.eye{
position: absolute;
top: 80px;
width: 30px;
height: 50px;
border-radius: 50%;
background: #152131;

&:after{
content: "";
position: absolute;
border-radius: 50%;
width: 34px;
height: 55px;
background: #f8bb9f;
top: 1px;
left: 0px;
}
&.left-eye{
left: 20px;
transform:rotate(30deg);

}
&.right-eye{
left: 80px;
top: 79px;
transform: rotate(-40deg) rotateY(160deg);
}
}
.nose{
width: 6px;
height: 22px;
position: absolute;
top: 105px;
left: 58px;
background: #f8bb9f;
z-index: 2;
.border;
border-radius: 50%;
&:after{
content: "";
position: absolute;
width: 4px;
height: 22px;
top: -5px;
left: 1px;
background: #f8bb9f;
}
}
.mouth{
.border;
z-index: 1;
width: 30px;
height: 30px;
background: #d96b6e;
position: absolute;
top: 130px;
left: 46px;
border-radius: 50%;
&:after{
content: "";
width: 60px;
height: 30px;
background: #f8bb9f;
position: absolute;
top: -10px;
left: -20px;
border-radius: 50%;
}
}
}

.clothes{
background: #a5d1d2;
width: 100px;
position: absolute;
top: 200px;
height: 130px;
left: 14px;
border-radius: 50% 50% 10% 10%;
z-index: 2;
.border;
.cover{
border-radius: 50% 50% 10% 10%;
width: 102px;
height: 60px;
background: #a5d1d2;
position: absolute;
top: 0;
z-index: 3;
}
.collar{
border-radius: 50% 50% 10% 10%;
height: 130px;
width: 100px;
position: absolute;
z-index: 4;
background: #a5d1d2;
overflow: hidden;
&:after{
content: "";
position: absolute;
width: 40px;
height: 40px;
border-radius: 50%;
background: #a5d1d2;
left: 30px;
top: -20px;
.border;
z-index: 5;
}
}
}
.hand{
.border;
z-index: 1;
background: #a5d1d2;
border: 1px solid #152131;
border-radius: 90% 90% 50% 50%;
height: 110px;
left: -13px;
position: absolute;
top: 200px;
width: 150px;
}
.trousers{
.border;
height: 140px;
left: 16px;
position: absolute;
top: 331px;
width: 96px;
background: #6c8d6e;
&:after{
content: "";
transform: rotate(82deg) scale(0.825) skew(70deg) translate(0px);
height: 100px;
width: 400px;
background: #ffef5e;
height: 100px;
left: -152px;
position: absolute;
top: 250px;
}
}
.footer{
width: 30px;
height: 15px;
background: #a18883;
position: absolute;
top: 473px;
&.left-footer{
width: 25px;
left: 16px;
}
&.right-footer{
left: 84px;
}
}
.shoes{
width: 45px;
height: 18px;
position: absolute;
top: 483px;
background: #555a6d;
&.left-shoes{
border-radius: 50% 0 30% 50%;
left: -4px;
transform:rotate(-10deg);
}
&.right-shoes{
border-radius: 0 50% 50% 30%;
left: 84px;
transform:rotate(10deg);
}
}
}

 

本文由澳门新萄京官方网站发布于澳门新萄京赌场网址,转载请注明出处:澳门新萄京官方网站css3实现的小丸子和爷爷,特

关键词: