CSS3与页面布局学习总括,使用CSS3画出一个叮当猫

行使CSS3画出一个叮当猫

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

初稿出处: 郭锦荣   

刚上学了这么些案例,然后觉得比较好玩,就练习了一下。然后发现实际上也简单,要是你平常应用PS或者Flash的话,应该就会了解画个叮当猫是很不难的事,至少自己是那般觉得。然而,用CSS3画出来确实是率先次接触,所以很情愿去品味一下,对于我那种菜鸟,确实是赞助广大,至少了然如何去画一个大致的人物形象出来,再添加部分动画效果,就活了,这就更好玩了!OK,早先从前,先把效果图晒一下:

亚洲必赢官网 1

PS:说实话,我认为挺可爱的,小时候不时看多啦A梦,突然感觉很亲密,很孩子气,弹指间青春了诸多,哈哈!亚洲必赢官网 2

首先,先把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);
}

看望效果到底怎么着:

亚洲必赢官网 3

亚洲必赢官网 4 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;
        }

写了那样种种式,结果是哪些的呢:

亚洲必赢官网 5

亚洲必赢官网 6 怎么看都觉着别别扭扭,哦!还差胡须须和反动脸底的边框呢,咱给补上:

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

亚洲必赢官网 7

亚洲必赢官网 8 这样就对了,瞧着多舒服啊!一气浑成,做脖子和身体:

CSS

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
/*围脖*/
        .doraemon .choker {
            width: 230px;
            height: 20px;
            background: #c40;
            /*线性渐变 让围巾看上去更自然*/
            background: -webkit-gradient(linear,left top,left bottom,from(#c40),to(#800400));
            background: -moz-linear-gradient(center top,#c40,#800400);
            background: -ms-linear-gradient(center top,#c40,#800400);
            border: 2px solid #000;
            border-radius: 10px;
            position: relative;
            top: -40px;
            left: 45px;
            z-index: 4;
        }
        /*铃铛*/
        .doraemon .choker .bell {
            width: 40px;
            height: 40px;
            _overflow: hidden; /*IE6 hack*/
            border: 2px solid #000;
            border-radius: 50px;
            background: #f9f12a;
            background: -webkit-gradient(linear, left top, left bottom, from(#f9f12a),color-stop(0.5, #e9e11a), to(#a9a100));
            background: -moz-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100);
            background: -ms-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100);
            box-shadow: -5px 5px 10px rgba(0,0,0,0.25);
            position: absolute;
            top: 5px;
            left: 90px;
        }
        /*双横线*/
        .doraemon .choker .bell_line {
            width: 36px;
            height: 2px;
            background: #f9f12a;
            border: 2px solid #333;
            border-radius: 3px 3px 0 0;
            position: absolute;
            top: 10px;
        }
        /*黑点*/
        .doraemon .choker .bell_circle{
            width:12px;
            height:10px;
            background:#000;
            border-radius:5px;
            position:absolute;
            top:20px;
            left:14px;
        }
        /*黑点下的线*/
        .doraemon .choker .bell_under{
            width: 3px;
            height:15px;
            background:#000;
            position:absolute;
            left: 18px;
            top:27px;
        }
        /*铃铛高光*/
        .doraemon .choker .bell_light{
            width:12px;
            height:12px;
            border-radius:10px;
            box-shadow:19px 8px 5px #fff;
            position:absolute;
            top:-5px;
            left:5px;
            opacity:0.7;
        }
        /*身子*/
        .doraemon .bodys {
            position: relative;
            top: -310px;
        }
        /*肚子*/
        .doraemon .bodys .body {
            width: 220px;
            height: 165px;
            background: #07beea;
            background: -webkit-gradient(linear,right top,left top,from(#07beea),color-stop(0.5, #0073b3),color-stop(0.75,#00b0e0), to(#0096be));
            background: -moz-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);
            background: -ms-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);
            border:2px solid #333;
            position:absolute;
            top:265px;
            left:50px;
        }
        /*白色肚兜*/
            .doraemon .bodys .wraps {
                width: 170px;
                height: 170px;
                background: #fff;
                background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444), to(#000));
                background: -moz-linear-gradient(right top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000);
                background: -ms-linear-gradient(right top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000);
                border: 2px solid #000;
                border-radius: 85px;
                position: absolute;
                left: 72px;
                top: 230px;
            }
            /*口袋*/
            .doraemon .bodys .pocket {
                width: 130px;
                height: 130px;
                border-radius: 65px;
                background: #fff;
                background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.70,#fff),color-stop(0.75,#f8f8f8),color-stop(0.80,#eee),color-stop(0.88,#ddd), to(#fff));
                background: -moz-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%, #fff);
                background: -ms-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%, #fff);
                border: 2px solid #000;
                position:absolute;
                top: 250px;
                left: 92px;
            }
            /*挡住口袋一半*/
            .doraemon .bodys .pocket_mask {
                width: 134px;
                height: 60px;
                background:#fff;
                border-bottom: 2px solid #000;
                position:absolute;
                top: 259px;
                left: 92px;
           }

好呢,脖子和肢体都有啊!上图:

亚洲必赢官网 9

现行看起来有点像安放品,不过笑容依旧那么单纯,好了,赶紧把手脚做出来:

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

好了,最终完整结果:

亚洲必赢官网 10

看一下,效果是否和一初叶的如出一辙呢 亚洲必赢官网 11 ,纵然做好了,可是依旧得以让它动起来的,比如眼睛,大家得以给它加个动画效果,让眼睛打转起来:

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

亚洲必赢官网 12

刚上学了那一个案例,然后觉得相比较好玩,就训练了一晃。然后发现其实也简单,即使您平常利用PS或者Flash的话,应该就会知晓画个叮当猫是很简单的事,至少自己是那样认为。

亚洲必赢官网 13

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

web前端开发者最最注的内容是七个:HTML、CSS与JavaScript,他们各自在分裂地点公布自己的功效,HTML完成页面结构,CSS已毕页面的变现与风格,JavaScript已毕部分客户端的效用与作业。当然内容与用户资源也是不可能忽视的。尽量不要跨义务范围使用,有点“SRP单一义务”的趣味,如字体大小应该是CSS控制的,就不该利用HTML标签达成,假若CSS能化解的难题尽量不要用JavaScript落成。

亚洲必赢官网 14

作者:来源:博客园|2015-04-23 15:40

<!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“; <html
xmlns=”; <meta
http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>CSS3测试</title> <meta name=”description”
content=”测试CSS3在挨家挨户浏览器的效用”> <meta http-equiv=”adimage”
content=”200″> <mce:style><!– body{ background:#fff;
width:901px; margin:auto; } #doraemon{ position:fixed; margin:50px;
float:left; width:500px; } #instr{ float:right; width:400px;
font-size:14px; border-left:2px solid black; padding-left:20px; }
#head_light{ width:50px; height:50px; transform: rotate(20deg);
-webkit-transform: rotate(20deg); -moz-transform: rotate(20deg);
-o-transform: rotate(20deg); box-shadow:80px 20px 50px #fff;
-webkit-box-shadow:80px 20px 55px #fff; -moz-box-shadow:80px 20px 50px
#fff; border-radius:45px; -webkit-border-radius:45px;
-moz-border-radius:60px; position:absolute; top:-20px; left:170px;
opacity:0.5 } #face{ position:relative; width:310px; height:300px;
border-radius:146px; -webkit-border-radius:146px;
-moz-border-radius:146px; background:#07beea; background:
-webkit-gradient(linear, right top, left bottom, from(#fff)
,color-stop(0.20, #07beea), color-stop(0.73, #10a6ce),color-stop(0.95,
#000), to(#444)); background: -moz-linear-gradient(right top,
#fff,#07beea 20%, #10a6ce 73% ,#000 95% ,#000 155%); border:#333
2px solid; top:-15px; box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
-webkit-box-shadow:-5px 10px 15px rgba(0,0,0,0.45); -moz-box-shadow:-5px
10px 15px rgba(0,0,0,0.45); } #base{ position:relative; top:-5px; }
#base_white{ position:absolute; border:#000 2px solid; width:264px;
height:196px; border-radius: 150px 150px; -webkit-border-radius: 150px
150px; -moz-border-radius: 150px 150px; 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); z-index:1; top:85px; left:22px; }
#eyes{ position:relative; top:-5px; } div.eye{ position:absolute;
border-radius: 35px 35px; -webkit-border-radius: 35px 35px;
-moz-border-radius: 35px 35px; border:2px solid #000; width:72px;
height:83px; z-index:20; background:#fff; } div.black_eye{
position:absolute; width:15px; height:15px; border-radius:10px;
-webkit-border-radius:10px; -moz-border-radius:10px; background:#333;
z-index:21; -webkit-animation-name: cate; -webkit-animation-duration:
3s; -webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 200; } @-webkit-keyframes cate{ 0%{
margin:0 0 0 0; } 80% { margin:0px 0 0 0; } 85% { margin:-20px 0 0 0; }
90%{ margin:0 0 0 0; } 93%{ margin:0 0 0 7px; } 96%{ margin:0 0 0 0; }
100%{ margin:0 0 0 0; } } div.black_left{ top:100px; left:130px; }
div.black_right{ top:100px; left:170px; } div.eye_left{ top:45px;
left:82px; } div.eye_right{ top:45px; left:156px; } #nose{ width:32px;
height:32px; border:2px solid #000; border-radius:50px;
-webkit-border-radius:50px; -moz-border-radius:50px;
background:#c93e00; position:absolute; top:117px; left:139px;
z-index:30; } #nose_light{ width:10px; height:10px; border-radius:5px;
-webkit-border-radius:5px; -moz-border-radius:5px; box-shadow:19px 8px
5px #fff; -webkit-box-shadow:19px 8px 5px #fff; -moz-box-shadow:19px
8px 5px #fff; position:relative; top:0px; left:0px; } #nose_line{
background:#000; width:4px; height:100px; top:125px; left:156px;
position:absolute; } #nose_line{ background:#333; width:3px;
height:100px; top:140px; left:155px; position:absolute; z-index:20; }
#mouth{ width:240px; height:500px; border-bottom:3px solid #333;
border-radius:120px; -webkit-border-radius:120px;
-moz-border-radius:120px; position:absolute; top:-263px; left:36px;
z-index:10; } #mouth_rewrite{ background:#fff; width:240px;
height:90px; position:relative; top:115px; left:35px; z-index:12;
border-radius:45px; -webkit-border-radius:45px; -moz-border-radius:60px;
} #firefox_mouth, x:-moz-broken, x:last-of-type, x:indeterminate {
position:relative; width:170px; height:150px; -moz-border-radius:85px;
border:3px solid #000; background:#FFF; z-index:11; top:-3px;
left:70px; } .whiskers{ background:#333; height:2px; width:60px;
position:absolute; z-index:20; } .whi_right{ top:165px; left:210px; }
.whi_right_top{ top:145px; left:210px; } .whi_right_bottom{
top:185px; left:210px; } .whi_left{ top:165px; left:50px; }
.whi_left_top{ top:145px; left:50px; } .whi_left_bottom{ top:185px;
left:50px; } .rotate20{ transform: rotate(20deg); -webkit-transform:
rotate(20deg); -moz-transform: rotate(20deg); -o-transform:
rotate(20deg); } .rotate160{ transform: rotate(160deg);
-webkit-transform: rotate(160deg); -moz-transform: rotate(160deg);
-o-transform: rotate(160deg); } #choker{ position:relative; top:-55px;
left:35px; z-index:100; } #belt{ width:230px; height:20px; border:#000
solid 2px; background:#ca4100; background: -webkit-gradient(linear,
left top, left bottom, from(#ca4100), to(#800400)); background:
-moz-linear-gradient(top, #ca4100, #800400); border-radius:10px;
-webkit-border-radius:10px; -moz-border-radius:10px; position:relative;
left:5px; } #bell{ width:40px; height:40px; border-radius:50px;
-webkit-border-radius:50px; -moz-border-radius:50px; border:2px solid
#000; 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); box-shadow:-5px 5px 10px rgba(0,0,0,0.25);
-webkit-box-shadow:-5px 3px 5px rgba(0,0,0,0.25); -moz-box-shadow:-5px
5px 10px rgba(0,0,0,0.25); position:relative; top:-15px; left:100px; }
#bell_line{ width:36px; height:2px; background:#f9f12a; border:#333
solid 2px; position:relative; top:10px; } #bell_circle{ width:12px;
height:10px; border-radius:5px; -webkit-border-radius:5px;
-moz-border-radius:5px; background:#000; position:relative; top:14px;
left:14px; } #bell_under{ width:3px; height:15px; background:#000;
position:relative; top:10px; left:18px; } #bell_light{ width:10px;
height:10px; border-radius:10px; -webkit-border-radius:10px;
-moz-border-radius:10px; box-shadow:19px 8px 5px #fff;
-webkit-box-shadow:19px 8px 5px #fff; -moz-box-shadow:19px 8px 5px
#fff; position:relative; opacity:0.7; top:-35px; left:5px; } #doutai{
position:absolute; 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, #07beea,
#0073b3 50%,#0096be 75%,#00b0e0 ,#0096be 100% ,#333 114%);
border:#333 2px solid; top:262px; left:46px; } div.base_white2{
position:absolute; width:170px; height:170px; border-radius:85px;
-webkit-border-radius:85px; -moz-border-radius:85px; border:2px solid
#000; 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); } .doutai_center{ top:230px;
left:72px; } #circle{ position:relative; width:130px; height:130px;
border-radius:65px; -webkit-border-radius:65px; -moz-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); border:2px solid #000;
top:-120px; left:92px; } #circle_rewrite{ position:relative;
width:134px; height:60px; background:#fff; border-bottom:2px solid
#000; top:-250px; left:92px; } #hand_right{ position:absolute;
top:272px; left:248px; width:100px; height:100px; } #arm_right{
position:relative; 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(top, #07beea, #07beea 85%, #555); border:solid
1px #000; z-index:-1; top:17px; transform: rotate(35deg);
-webkit-transform: rotate(35deg); -moz-transform: rotate(35deg);
-o-transform: rotate(35deg); box-shadow:-10px 7px 10px rgba(0,0,0,0.35);
-webkit-box-shadow:-10px 7px 10px rgba(0,0,0,0.35);
-moz-box-shadow:-10px 7px 10px rgba(0,0,0,0.35); } #hand_left{
position:absolute; top:272px; left:-46px; width:100px; height:100px; }
#arm_left{ position:relative; width:80px; height:50px;
background:#0096be; border:solid 1px #000; z-index:-1; top:17px;
left:36px; transform: rotate(145deg); -webkit-transform: rotate(145deg);
-moz-transform: rotate(145deg); -o-transform: rotate(145deg);
box-shadow:5px -7px 10px rgba(0,0,0,0.25); -webkit-box-shadow:5px -7px
10px rgba(0,0,0,0.25); -moz-box-shadow:5px -7px 10px rgba(0,0,0,0.25); }
div.hand_circle{ position:absolute; width:60px; height:60px;
border-radius:30px; -webkit-border-radius:30px; -moz-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); } .hand_right{ top:32px; left:40px; }
.arm_rewrite_right{ position:relative; width:4px; height:45px;
background:#07beea; top:-51px; left:18px; } .hand_left{ top:34px;
left:10px; } .arm_rewrite_left{ position:relative; width:4px;
height:50px; background:#0096be; top:-52px; left:92px; } #foot{
position:relative; width:280px; height:40px; top:-141px; left:20px; }
#foot_left{ 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,#CSS3与页面布局学习总括,使用CSS3画出一个叮当猫。eee), to(#999));
background: -moz-linear-gradient(right top, #fff,#fff 75%, #eee 85%,
#999); border:solid 2px #333; border-top-left-radius:80px;
border-bottom-left-radius:40px; border-top-right-radius:60px;
border-bottom-right-radius:60px; -webkit-border-top-left-radius:80px;
-webkit-border-bottom-left-radius:40px;
-webkit-border-top-right-radius:60px;
-webkit-border-bottom-right-radius:60px;
-moz-border-radius-topleft:80px; -moz-border-radius-bottomleft:40px;
-moz-border-radius-topright:60px; -moz-border-radius-bottomright:60px;
position:relative; left:8px; top:2px; box-shadow:-6px 0px 10px
rgba(0,0,0,0.35); -webkit-box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
-moz-box-shadow:-6px 0px 10px rgba(0,0,0,0.35); z-index:-1; }
#foot_right{ position:relative; 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); border:solid 2px #333; border-top-left-radius:60px;
border-bottom-left-radius:60px; border-top-right-radius:80px;
border-bottom-right-radius:40px; -webkit-border-top-left-radius:60px;
-webkit-border-bottom-left-radius:60px;
-webkit-border-top-right-radius:80px;
-webkit-border-bottom-right-radius:40px;
-moz-border-radius-topleft:60px; -moz-border-radius-bottomleft:60px;
-moz-border-radius-topright:80px; -moz-border-radius-bottomright:40px;
top:-32px; left:141px; box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
-webkit-box-shadow:-6px 0px 10px rgba(0,0,0,0.35); -moz-box-shadow:-6px
0px 10px rgba(0,0,0,0.35); z-index:-1; } #foot_rewrite{
position:relative; 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); top:-76px;
left:127px; border-top:2px solid #000; border-right:2px solid #000;
border-left:2px solid #000; border-top-right-radius:40px;
border-top-left-radius:40px; -webkit-border-top-right-radius:40px;
-webkit-border-top-left-radius:40px; -moz-border-radius-topleft:40px;
-moz-border-radius-topright:40px; } #亚洲必赢官网,shadow_doutai_left{ width:30px;
height:200px; box-shadow:-10px 10px 15px rgba(0,0,0,0.45);
-webkit-box-shadow:-10px 10px 15px rgba(0,0,0,0.45);
-moz-box-shadow:-10px 10px 15px rgba(0,0,0,0.45); position:absolute;
top:250px; left:46px; z-index:-10; } #shadow_doutai_right{
width:30px; height:200px; box-shadow:10px 10px 15px rgba(0,0,0,0.35);
-webkit-box-shadow:10px 10px 25px rgba(0,0,0,0.35); -moz-box-shadow:10px
10px 15px rgba(0,0,0,0.35); position:absolute; top:240px; left:230px;
z-index:-10; } #shadow_doutai_arm{ width:85px; height:165px;
box-shadow:-100px 10px 15px rgba(0,0,0,0.0); -webkit-box-shadow:-100px
10px 15px rgba(0,0,0,0.25); -moz-box-shadow:-100px 10px 15px
rgba(0,0,0,0.25); position:absolute; top:230px; left:113px; z-index:10;
opacity:0.5; transform: rotate(-20deg); -webkit-transform:
rotate(-20deg); -moz-transform: rotate(-20deg); -o-transform:
rotate(-20deg); border-bottom-left-radius:40px;
-webkit-border-bottom-left-radius:40px;
-moz-border-radius-bottomleft:40px; border-top-left-radius:20px;
-webkit-border-top-left-radius:20px; -moz-border-radius-topleft:20px; }
#shadow_belt{ width:40px; height:30px; box-shadow:-100px 10px 15px
rgba(0,0,0,0); -webkit-box-shadow:-100px 10px 15px rgba(0,0,0,0.25);
-moz-box-shadow:-100px 10px 15px rgba(0,0,0,0.25); position:absolute;
top:240px; left:130px; z-index:10; border-bottom-left-radius:40px;
-webkit-border-bottom-left-radius:40px;
-moz-border-radius-bottomleft:40px; z-index:300; }
#arm_left:not(/*|*), .arm_rewrite_left:not(/*|*){
background:#07beea; } #arm_left, .arm_rewrite_left{
background:#07beea/9; *background:#07beea; _background:#07beea; }
#kiji{ position:relative; top:-150px; }
–></mce:style><style mce_bogus=”1″>body{
background:#fff; width:901px; margin:auto; } #doraemon{
position:fixed; margin:50px; float:left; width:500px; } #instr{
float:right; width:400px; font-size:14px; border-left:2px solid black;
padding-left:20px; } #head_light{ width:50px; height:50px; transform:
rotate(20deg); -webkit-transform: rotate(20deg); -moz-transform:
rotate(20deg); -o-transform: rotate(20deg); box-shadow:80px 20px 50px
#fff; -webkit-box-shadow:80px 20px 55px #fff; -moz-box-shadow:80px
20px 50px #fff; border-radius:45px; -webkit-border-radius:45px;
-moz-border-radius:60px; position:absolute; top:-20px; left:170px;
opacity:0.5 } #face{ position:relative; width:310px; height:300px;
border-radius:146px; -webkit-border-radius:146px;
-moz-border-radius:146px; background:#07beea; background:
-webkit-gradient(linear, right top, left bottom, from(#fff)
,color-stop(0.20, #07beea), color-stop(0.73, #10a6ce),color-stop(0.95,
#000), to(#444)); background: -moz-linear-gradient(right top,
#fff,#07beea 20%, #10a6ce 73% ,#000 95% ,#000 155%); border:#333
2px solid; top:-15px; box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
-webkit-box-shadow:-5px 10px 15px rgba(0,0,0,0.45); -moz-box-shadow:-5px
10px 15px rgba(0,0,0,0.45); } #base{ position:relative; top:-5px; }
#base_white{ position:absolute; border:#000 2px solid; width:264px;
height:196px; border-radius: 150px 150px; -webkit-border-radius: 150px
150px; -moz-border-radius: 150px 150px; 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); z-index:1; top:85px; left:22px; }
#eyes{ position:relative; top:-5px; } div.eye{ position:absolute;
border-radius: 35px 35px; -webkit-border-radius: 35px 35px;
-moz-border-radius: 35px 35px; border:2px solid #000; width:72px;
height:83px; z-index:20; background:#fff; } div.black_eye{
position:absolute; width:15px; height:15px; border-radius:10px;
-webkit-border-radius:10px; -moz-border-radius:10px; background:#333;
z-index:21; -webkit-animation-name: cate; -webkit-animation-duration:
3s; -webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 200; } @-webkit-keyframes cate{ 0%{
margin:0 0 0 0; } 80% { margin:0px 0 0 0; } 85% { margin:-20px 0 0 0; }
90%{ margin:0 0 0 0; } 93%{ margin:0 0 0 7px; } 96%{ margin:0 0 0 0; }
100%{ margin:0 0 0 0; } } div.black_left{ top:100px; left:130px; }
div.black_right{ top:100px; left:170px; } div.eye_left{ top:45px;
left:82px; } div.eye_right{ top:45px; left:156px; } #nose{ width:32px;
height:32px; border:2px solid #000; border-radius:50px;
-webkit-border-radius:50px; -moz-border-radius:50px;
background:#c93e00; position:absolute; top:117px; left:139px;
z-index:30; } #nose_light{ width:10px; height:10px; border-radius:5px;
-webkit-border-radius:5px; -moz-border-radius:5px; box-shadow:19px 8px
5px #fff; -webkit-box-shadow:19px 8px 5px #fff; -moz-box-shadow:19px
8px 5px #fff; position:relative; top:0px; left:0px; } #nose_line{
background:#000; width:4px; height:100px; top:125px; left:156px;
position:absolute; } #nose_line{ background:#333; width:3px;
height:100px; top:140px; left:155px; position:absolute; z-index:20; }
#mouth{ width:240px; height:500px; border-bottom:3px solid #333;
border-radius:120px; -webkit-border-radius:120px;
-moz-border-radius:120px; position:absolute; top:-263px; left:36px;
z-index:10; } #mouth_rewrite{ background:#fff; width:240px;
height:90px; position:relative; top:115px; left:35px; z-index:12;
border-radius:45px; -webkit-border-radius:45px; -moz-border-radius:60px;
} #firefox_mouth, x:-moz-broken, x:last-of-type, x:indeterminate {
position:relative; width:170px; height:150px; -moz-border-radius:85px;
border:3px solid #000; background:#FFF; z-index:11; top:-3px;
left:70px; } .whiskers{ background:#333; height:2px; width:60px;
position:absolute; z-index:20; } .whi_right{ top:165px; left:210px; }
.whi_right_top{ top:145px; left:210px; } .whi_right_bottom{
top:185px; left:210px; } .whi_left{ top:165px; left:50px; }
.whi_left_top{ top:145px; left:50px; } .whi_left_bottom{ top:185px;
left:50px; } .rotate20{ transform: rotate(20deg); -webkit-transform:
rotate(20deg); -moz-transform: rotate(20deg); -o-transform:
rotate(20deg); } .rotate160{ transform: rotate(160deg);
-webkit-transform: rotate(160deg); -moz-transform: rotate(160deg);
-o-transform: rotate(160deg); } #choker{ position:relative; top:-55px;
left:35px; z-index:100; } #belt{ width:230px; height:20px; border:#000
solid 2px; background:#ca4100; background: -webkit-gradient(linear,
left top, left bottom, from(#ca4100), to(#800400)); background:
-moz-linear-gradient(top, #ca4100, #800400); border-radius:10px;
-webkit-border-radius:10px; -moz-border-radius:10px; position:relative;
left:5px; } #bell{ width:40px; height:40px; border-radius:50px;
-webkit-border-radius:50px; -moz-border-radius:50px; border:2px solid
#000; 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); box-shadow:-5px 5px 10px rgba(0,0,0,0.25);
-webkit-box-shadow:-5px 3px 5px rgba(0,0,0,0.25); -moz-box-shadow:-5px
5px 10px rgba(0,0,0,0.25); position:relative; top:-15px; left:100px; }
#bell_line{ width:36px; height:2px; background:#f9f12a; border:#333
solid 2px; position:relative; top:10px; } #bell_circle{ width:12px;
height:10px; border-radius:5px; -webkit-border-radius:5px;
-moz-border-radius:5px; background:#000; position:relative; top:14px;
left:14px; } #bell_under{ width:3px; height:15px; background:#000;
position:relative; top:10px; left:18px; } #bell_light{ width:10px;
height:10px; border-radius:10px; -webkit-border-radius:10px;
-moz-border-radius:10px; box-shadow:19px 8px 5px #fff;
-webkit-box-shadow:19px 8px 5px #fff; -moz-box-shadow:19px 8px 5px
#fff; position:relative; opacity:0.7; top:-35px; left:5px; } #doutai{
position:absolute; 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, #07beea,
#0073b3 50%,#0096be 75%,#00b0e0 ,#0096be 100% ,#333 114%);
border:#333 2px solid; top:262px; left:46px; } div.base_white2{
position:absolute; width:170px; height:170px; border-radius:85px;
-webkit-border-radius:85px; -moz-border-radius:85px; border:2px solid
#000; 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); } .doutai_center{ top:230px;
left:72px; } #circle{ position:relative; width:130px; height:130px;
border-radius:65px; -webkit-border-radius:65px; -moz-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); border:2px solid #000;
top:-120px; left:92px; } #circle_rewrite{ position:relative;
width:134px; height:60px; background:#fff; border-bottom:2px solid
#000; top:-250px; left:92px; } #hand_right{ position:absolute;
top:272px; left:248px; width:100px; height:100px; } #arm_right{
position:relative; 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(top, #07beea, #07beea 85%, #555); border:solid
1px #000; z-index:-1; top:17px; transform: rotate(35deg);
-webkit-transform: rotate(35deg); -moz-transform: rotate(35deg);
-o-transform: rotate(35deg); box-shadow:-10px 7px 10px rgba(0,0,0,0.35);
-webkit-box-shadow:-10px 7px 10px rgba(0,0,0,0.35);
-moz-box-shadow:-10px 7px 10px rgba(0,0,0,0.35); } #hand_left{
position:absolute; top:272px; left:-46px; width:100px; height:100px; }
#arm_left{ position:relative; width:80px; height:50px;
background:#0096be; border:solid 1px #000; z-index:-1; top:17px;
left:36px; transform: rotate(145deg); -webkit-transform: rotate(145deg);
-moz-transform: rotate(145deg); -o-transform: rotate(145deg);
box-shadow:5px -7px 10px rgba(0,0,0,0.25); -webkit-box-shadow:5px -7px
10px rgba(0,0,0,0.25); -moz-box-shadow:5px -7px 10px rgba(0,0,0,0.25); }
div.hand_circle{ position:absolute; width:60px; height:60px;
border-radius:30px; -webkit-border-radius:30px; -moz-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); } .hand_right{ top:32px; left:40px; }
.arm_rewrite_right{ position:relative; width:4px; height:45px;
background:#07beea; top:-51px; left:18px; } .hand_left{ top:34px;
left:10px; } .arm_rewrite_left{ position:relative; width:4px;
height:50px; background:#0096be; top:-52px; left:92px; } #foot{
position:relative; width:280px; height:40px; top:-141px; left:20px; }
#foot_left{ 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); border:solid 2px #333; border-top-left-radius:80px;
border-bottom-left-radius:40px; border-top-right-radius:60px;
border-bottom-right-radius:60px; -webkit-border-top-left-radius:80px;
-webkit-border-bottom-left-radius:40px;
-webkit-border-top-right-radius:60px;
-webkit-border-bottom-right-radius:60px;
-moz-border-radius-topleft:80px; -moz-border-radius-bottomleft:40px;
-moz-border-radius-topright:60px; -moz-border-radius-bottomright:60px;
position:relative; left:8px; top:2px; box-shadow:-6px 0px 10px
rgba(0,0,0,0.35); -webkit-box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
-moz-box-shadow:-6px 0px 10px rgba(0,0,0,0.35); z-index:-1; }
#foot_right{ position:relative; 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); border:solid 2px #333; border-top-left-radius:60px;
border-bottom-left-radius:60px; border-top-right-radius:80px;
border-bottom-right-radius:40px; -webkit-border-top-left-radius:60px;
-webkit-border-bottom-left-radius:60px;
-webkit-border-top-right-radius:80px;
-webkit-border-bottom-right-radius:40px;
-moz-border-radius-topleft:60px; -moz-border-radius-bottomleft:60px;
-moz-border-radius-topright:80px; -moz-border-radius-bottomright:40px;
top:-32px; left:141px; box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
-webkit-box-shadow:-6px 0px 10px rgba(0,0,0,0.35); -moz-box-shadow:-6px
0px 10px rgba(0,0,0,0.35); z-index:-1; } #foot_rewrite{
position:relative; 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); top:-76px;
left:127px; border-top:2px solid #000; border-right:2px solid #000;
border-left:2px solid #000; border-top-right-radius:40px;
border-top-left-radius:40px; -webkit-border-top-right-radius:40px;
-webkit-border-top-left-radius:40px; -moz-border-radius-topleft:40px;
-moz-border-radius-topright:40px; } #shadow_doutai_left{ width:30px;
height:200px; box-shadow:-10px 10px 15px rgba(0,0,0,0.45);
-webkit-box-shadow:-10px 10px 15px rgba(0,0,0,0.45);
-moz-box-shadow:-10px 10px 15px rgba(0,0,0,0.45); position:absolute;
top:250px; left:46px; z-index:-10; } #shadow_doutai_right{
width:30px; height:200px; box-shadow:10px 10px 15px rgba(0,0,0,0.35);
-webkit-box-shadow:10px 10px 25px rgba(0,0,0,0.35); -moz-box-shadow:10px
10px 15px rgba(0,0,0,0.35); position:absolute; top:240px; left:230px;
z-index:-10; } #shadow_doutai_arm{ width:85px; height:165px;
box-shadow:-100px 10px 15px rgba(0,0,0,0.0); -webkit-box-shadow:-100px
10px 15px rgba(0,0,0,0.25); -moz-box-shadow:-100px 10px 15px
rgba(0,0,0,0.25); position:absolute; top:230px; left:113px; z-index:10;
opacity:0.5; transform: rotate(-20deg); -webkit-transform:
rotate(-20deg); -moz-transform: rotate(-20deg); -o-transform:
rotate(-20deg); border-bottom-left-radius:40px;
-webkit-border-bottom-left-radius:40px;
-moz-border-radius-bottomleft:40px; border-top-left-radius:20px;
-webkit-border-top-left-radius:20px; -moz-border-radius-topleft:20px; }
#shadow_belt{ width:40px; height:30px; box-shadow:-100px 10px 15px
rgba(0,0,0,0); -webkit-box-shadow:-100px 10px 15px rgba(0,0,0,0.25);
-moz-box-shadow:-100px 10px 15px rgba(0,0,0,0.25); position:absolute;
top:240px; left:130px; z-index:10; border-bottom-left-radius:40px;
-webkit-border-bottom-left-radius:40px;
-moz-border-radius-bottomleft:40px; z-index:300; }
#arm_left:not(/*|*), .arm_rewrite_left:not(/*|*){
background:#07beea; } #arm_left, .arm_rewrite_left{
background:#07beea/9; *background:#07beea; _background:#07beea; }
#kiji{ position:relative; top:-150px; }</style>
</head><body> <div id=”doraemon”> <div
id=”face”> <div id=”head_light”></div> <div
id=”eyes”> <div ></div> <div ></div> <div
></div> <div ></div> </div> <div
id=”base”> <div id=”base_white”></div> <div
id=”nose”> <div id=”nose_light”></div> </div>
<div id=”nose_line”></div> <div
id=”mouth”></div> <div id=”mouth_rewrite”></div>
<div id=”firefox_mouth”></div> <div ></div>
<div ></div> <div ></div> <div
></div> <div ></div> <div ></div>
</div> </div> <div id=”choker”> <div
id=”belt”></div> <div id=”bell”> <div
id=”bell_line”></div> <div
id=”bell_circle”></div> <div
id=”bell_under”></div> <div
id=”bell_light”></div> </div> </div> <div
id=”body”> <div id=”doutai”></div> <div
></div> <div id=”pocket”> <div
id=”circle”></div> <div id=”circle_rewrite”></div>
</div> </div> <div id=”hand_right”> <div
id=”arm_right”></div> <div ></div> <div
></div> </div> <div id=”hand_left”> <div
id=”arm_left”></div> <div ></div> <div
></div> </div> <div id=”foot”> <div
id=”foot_left”></div> <div id=”foot_right”></div>
<div id=”foot_rewrite”></div> </div> <div
id=”shadow_doutai_arm”></div> <div
id=”shadow_doutai_left”></div> <div
id=”shadow_doutai_right”></div> <div
id=”shadow_belt”></div> </div> <div id=”instr”>
<p><strong>表达</strong>:本页面用于测试各类浏览器对CSS3的解释效果,右边的“图像”并非图片,而是纯CSS。近年来逐条浏览器对CSS3的支撑成效不均等,其中IE系的浏览器协理功用最差。</p>
<p><strong>副功用</strong>:你可以相比左右的“图片”来判定你利用的是怎么浏览器。</p>
<p>—</p> <ul>
<li>效果最好的是Webkit系浏览器,包罗Safari (4.05)和Chrome
(5.0)等,看到的效劳如下截图,而且眼睛还可以动:</li>
<blockquote><p><img height=”150″ width=”120″ alt=”safari”
src=””
mce_src=””
/></p></blockquote> <li>效果在其次的是Firefox
(3.6),效果和Safari的等同,但双眼不可以动。</li>
<blockquote><p><img height=”150″ width=”120″ alt=”safari”
src=””
mce_src=””
/></p></blockquote> <li>在Opera (10.53)
里,图像尚未了渐进层:</li> <blockquote><p><img
height=”150″ width=”121″ alt=”Opera10.53″
src=””
mce_src=””
/></p></blockquote> <li>在iPhone OS
3.1的Safari里:</li> <blockquote><p><img
height=”150″ width=”129″ alt=”Mobile Safari”
src=””
mce_src=””
/></p></blockquote> <li>在IE9测试版里:</li>
<blockquote><p><img height=”150″ width=”123″ alt=”IE9″
src=””
mce_src=””
/></p></blockquote> <li>在IE8里:</li>
<blockquote><p><img height=”150″ width=”124″ alt=”IE8″
src=””
mce_src=””
/></p></blockquote> <li>在IE7里:</li>
<blockquote><p><img height=”150″ width=”127″ alt=”IE7″
src=””
mce_src=””
/></p></blockquote> <li>在IE6里:</li>
<blockquote><p><img height=”150″ width=”113″ alt=”IE6″
src=””
mce_src=””
/></p></blockquote> </ul>
<p>本页面左边的源代码来自<a mce_
>那里</a>,由于已经被墙,所以我自建了这些页面。</p>
<p align=”right”>–<a mce_ ></a>Jason
Ng</a></p> </div> </body></html>

一、CSS3概要

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

亚洲必赢官网 15

收藏;)

 

1.1、特点

分享

亚洲必赢官网 16亚洲必赢官网 17

1.2、效果演示

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

亚洲必赢官网 18

HTML页面:

亚洲必赢官网 19<!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样式:

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

 

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

版权申明:本文为博主原创小说,未经博主允许不得转发。

1.3、接济文档与上学

高于的相助文档是最好的读书资料,CSS2的帮扶,极度详尽:

亚洲必赢官网 21

CSS3的支持文档:

亚洲必赢官网 22

以上的四个文档及越多的援救将一并放在项目示范中,请下载示例。

刚上学了那么些案例,然后觉得相比好玩,就训练了瞬间。然后发现其实也不难,如若您时不时使用PS或者Flash的话,应该就会分晓画个叮当猫是很不难的事,至少我是那般觉得。可是,用CSS3画出来确实是首先次接触,所以很情愿去品味一下,对于我这种菜鸟,确实是赞助众多,至少驾驭怎么样去画一个简短的
人物形象出来,再添加有些动画效果,就活了,那就更好玩了!OK,开端以前,先把效益图晒一下:


二、选择器

在运用CSS时大家率先要做的政工是找到元素,在写相应的体制,在CSS2.1中最常使用的是三种接纳器:

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

#div1

{

   color:red;

}

b)、类拔取器:以.开头,使用class属性引用,可以有三个,如class=”cls1 cls2
cls3″

.cls1

{

   background-color:#99ccff;

}

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

div span

{

   font-size:14px;

}

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

在CSS3中新增了广大的采取器,假设大家会jQuery,jQuery中超过半数接纳器在CSS3中都可以一向动用。

1.1、基础的选择器

亚洲必赢官网 23

革命字体中采纳器的区分是: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>

 

亚洲必赢官网 24

1.2、组合拔取器

亚洲必赢官网 25

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

亚洲必赢官网 26

亚洲必赢官网 27

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

亚洲必赢官网 28

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

 

亚洲必赢官网 29

PS:说实话,我觉着挺可爱的,小时候平时看多啊A梦,突然感觉很密切,很纯真,弹指间青春了重重,哈哈!热烈的一言一行

1.3、属性采用器

亚洲必赢官网 30

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

 

亚洲必赢官网 31

第一,先把HTML结构搭建好:

1.4、伪类

亚洲必赢官网 32

 

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

 

亚洲必赢官网 33

 

 陶冶:达成隔行换色,当鼠标悬停在每一行上时高亮显示为藏粉色,按下时高亮黑色。

亚洲必赢官网 34

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

 

<div class=”wrapper”> 

1.5、伪元素

亚洲必赢官网 35

    <!–叮当猫全体–> 

三、特殊性

    <div class=”doraemon”> 

四、刻度

        <!–头部–> 

五、示例下载

web前端开发者最最注的内容是多少个:HTML、CSS与JavaScript,…

        <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,首假诺为了便利 子元素/后代元素举行一定。

.wrapper{

margin:50px0 0500px;

}

.doraemon{

position:relative;

}

头顶head的体制,因为叮当猫的尾部不是正圆,所以宽高有一些大过,然后利用border-radius将底部从矩形变成椭圆形,然后再拔取径向渐变从右上角给背景来个放射性渐变,然后在加个影子,使其更有立体感,background:#07bbee;是为着合营低版本浏览器:

.doraemon .head {

position:relative;

width:320px;

height:300px;

border-radius:150px;

background:#07bbee;

background: -webkit-radial-gradient(righttop,#fff10%,#07bbee20%,#10a6ce75%,#000);

background: -moz-radial-gradient(righttop,#fff10%,#07bbee20%,#10a6ce75%,#000);

background: -ms-radial-gradient(righttop,#fff10%,#07bbee20%,#10a6ce75%,#000);

border:2pxsolid#555;

box-shadow:-5px10px15pxrgba(0,0,0,0.45);

}

看看效果到底怎么:

亚洲必赢官网 36

惊诧 shenmgui ,这么丑,别急,逐步让它活过来:

/*脸部*/

.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(righttop,#fff75%,#eee80%,#99990%,#444);

background: -moz-radial-gradient(righttop,#fff75%,#eee80%,#99990%,#444);

background: –ms-radial-gradient(righttop,#fff75%,#eee80%,#99990%,#444);

}

/*鼻子*/

.doraemon .face .nose{

width:30px;

height:30px;

border-radius:15px;

background:#c93300;

border:2pxsolid#000;

position:absolute;

top:110px;

left:140px;

z-index:3;/*鼻子在白色脸底上边*/

}

/*鼻子上的高光*/

.doraemon .face .nose .light {

width:10px;

height:10px;

border-radius:5px;

box-shadow:19px8px5px#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:3pxsolid#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:2pxsolid#000;

border-radius:35px35px;

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;

}

写了那般各种式,结果是怎么着的啊:

亚洲必赢官网 37

带病 怎么看都觉得别扭,哦!还差胡须须和白色脸底的边框呢,咱给补上:

/*胡须背景,首要用以挡住嘴巴的一部分,不要显得太长*/

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

}

亚洲必赢官网 38

微笑 那样就对了,望着多舒畅啊!一气呵成,做脖子和肉体:

/*围脖*/

.doraemon .choker {

width:230px;

height:20px;

background:#c40;

/*线性渐变 让围巾看上去更自然*/

background: -webkit-gradient(linear,lefttop,leftbottom,from(#c40),to(#800400));

background: -moz-linear-gradient(centertop,#c40,#800400);

background: -ms-linear-gradient(centertop,#c40,#800400);

border:2pxsolid#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:2pxsolid#000;

border-radius:50px;

background:#f9f12a;

background: -webkit-gradient(linear,lefttop,leftbottom, from(#f9f12a),color-stop(0.5,#e9e11a), to(#a9a100));

background: -moz-linear-gradient(top,#f9f12a,#e9e11a75%,#a9a100);

background: -ms-linear-gradient(top,#f9f12a,#e9e11a75%,#a9a100);

box-shadow:-5px5px10pxrgba(0,0,0,0.25);

position:absolute;

top:5px;

left:90px;

}

/*双横线*/

.doraemon .choker .bell_line {

width:36px;

height:2px;

background:#f9f12a;

border:2pxsolid#333;

border-radius:3px3px0 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:19px8px5px#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,righttop,lefttop,from(#07beea),color-stop(0.5,#0073b3),color-stop(0.75,#00b0e0), to(#0096be));

background: -moz-linear-gradient(rightcenter,#07beea,#0073b350%,#00b0e075%,#0096be100%);

background: -ms-linear-gradient(rightcenter,#07beea,#0073b350%,#00b0e075%,#0096be100%);

border:2pxsolid#333;

position:absolute;

top:265px;

left:50px;

}

/*白色肚兜*/

.doraemon .bodys .wraps {

width:170px;

height:170px;

background:#fff;

background: -webkit-gradient(linear,righttop,leftbottom, 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(righttop,#fff,#fff75%,#eee83%,#99990%,#44495%,#000);

background: -ms-linear-gradient(righttop,#fff,#fff75%,#eee83%,#99990%,#44495%,#000);

border:2pxsolid#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,righttop,leftbottom, 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(righttop,#fff,#fff70%,#f8f8f875%,#eee80%,#ddd88%,#fff);

background: -ms-linear-gradient(righttop,#fff,#fff70%,#f8f8f875%,#eee80%,#ddd88%,#fff);

border:2pxsolid#000;

position:absolute;

top:250px;

left:92px;

}

/*遮掩口袋一半*/

.doraemon .bodys .pocket_mask {

width:134px;

height:60px;

background:#fff;

border-bottom:2pxsolid#000;

position:absolute;

top:259px;

left:92px;

}

好呢,脖子和肉体都有啊!上图:

亚洲必赢官网 39

现行看起来有点像安放品,可是笑容依然那么单纯,好了,赶紧把手脚做出来:

/*左右手*/

.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,lefttop,leftbottom, from(#07beea),color-stop(0.85,#07beea), to(#555));

background: -moz-linear-gradient(centertop,#07BEEA,#07BEEA85%,#555);

background: -ms-linear-gradient(centertop,#07BEEA,#07BEEA85%,#555);

border:1pxsolid#000000;

box-shadow:-10px7px10pxrgba(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-7px10pxrgba(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:2pxsolid#000;

background:#fff;

background: -webkit-gradient(linear,righttop,leftbottom, from(#fff),color-stop(0.5,#fff),color-stop(0.70,#eee),color-stop(0.8,#ddd), to(#999));

background: -moz-linear-gradient(righttop,#fff,#fff50%,#eee70%,#ddd80%,#999);

background: -ms-linear-gradient(righttop,#fff,#fff50%,#eee70%,#ddd80%,#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,righttop,leftbottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999));

background: -moz-linear-gradient(righttop,#fff,#fff75%,#eee85%,#999);

background: -ms-linear-gradient(righttop,#fff,#fff75%,#eee85%,#999);

border:2pxsolid#333;

border-radius:80px60px60px40px;

box-shadow:-6px0 10pxrgba(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,righttop,leftbottom, from(#666),color-stop(0.83,#fff), to(#fff));

background: -moz-linear-gradient(righttop,#666,#fff83%,#fff);

background: -ms-linear-gradient(righttop,#666,#fff83%,#fff);

/*打造半圆效果*/

border:2pxsolid#000;

border-bottom:none;

border-radius:40px40px0 0;

position:relative;

top:-11px;

left:130px;

_left:127px;

}

好了,最后完整结果:

亚洲必赢官网 40

看一下,效果是否和一方始的均等呢 大笑
,纵然做好了,不过还能让它动起来的,比如眼睛,大家可以给它加个动画效果,让眼睛打转起来:

/*眼珠*/

.doraemon .eyes .eye .black{

width:14px;

height:14px;

background:#000;

border-radius:7px;

position:absolute;

top:40px;

-webkit-animation: eyemove3s linear infinite;

-moz-animation: eyemove3s linear infinite;

-ms-animation: eyemove3s linear infinite;

-o-animation: eyemove3s linear infinite;

animation: eyemove3s linear infinite;

}

/*让眼睛动起来*/

@-webkit-keyframes eyemove {

70%{

margin:0 00 0;

}

80%{

margin:-22px0 00;

}

85%{

margin:-22px0 05px;

}

90%{

margin:-22px10px0 0;

}

93%{

margin:-22px0 00;

}

96%{

margin:0 00 0;

}

}

@-moz-keyframes eyemove {

70%{

margin:0 00 0;

}

80%{

margin:-22px0 00;

}

85%{

margin:-22px0 05px;

}

90%{

margin:-22px10px0 0;

}

93%{

margin:-22px0 00;

}

96%{

margin:0 00 0;

}

}

@-o-keyframes eyemove {

70%{

margin:0 00 0;

}

80%{

margin:-22px0 00;

}

85%{

margin:-22px0 05px;

}

90%{

margin:-22px10px0 0;

}

93%{

margin:-22px0 00;

}

96%{

margin:0 00 0;

}

}

@keyframes eyemove {

70%{

margin:0 00 0;

}

80%{

margin:-22px0 00;

}

85%{

margin:-22px0 05px;

}

90%{

margin:-22px10px0 0;

}

93%{

margin:-22px0 00;

}

96%{

margin:0 00 0;

}

}

OK,那样,眼睛就会动了,有趣味的可以试一下,那里就无法体现了。可是倘使您有何更好的卡通片效果也可以品尝,那么那么些案例就得了了。

PS:就算那只是一个案例,然则真正扶助自己开阔思维,而且事实上做一个这么的机能,可能会开销很多时光,至少对本身来说近年来的确是那样子,首要难题照旧布局一定和颜料的合理性搭配,才能使形象尤为活灵活现有声有色!

屈居源代码:

网站地图xml地图