CSS3与页面布局学习计算,使用CSS3画出一个机器猫

采纳CSS3画出三个Doraemon

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

原稿出处: 郭锦荣   

刚上学了这几个案例,然后感觉相比较有趣,就演习了瞬间。然后发掘其实也简单,若是你平时利用PS只怕Flash的话,应该就能够清楚画个小叮当是超级轻巧的事,起码自个儿是那样以为。可是,用CSS3画出来确实是第一次接触,所以很乐意去尝尝一下,对于自个儿这种生手,确实是帮衬广大,最少通晓怎么样去画三个粗略的人物形象出来,再增添有些动漫片效果,就活了,那就越来越风趣了!OK,早前以前,先把效果与利益图晒一下:

图片 1

PS:说真的,小编以为挺可爱的,时辰候平常看多呐A梦,突然感到到很周围,很天真,须臾间年轻了超多,哈哈!图片 2

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

XHTML

<div class="wrapper"> <!--Doraemon全部--> <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全体做一些中坚的样式,机器猫全部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的话,应该就能够清楚画个Doraemon是非常轻松的事,起码自身是这么感觉。

图片 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,#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.第11中学最常使用的是三种接纳器:

a)、ID选择器:以#初始,援用时选拔id,如id="div1"

#div1

{

   color:red;

}

b)、类选用器:以.在此之前,使用class属性援用,能够有五个,如class="cls1 cls2 cls3"

.cls1

{

   background-color:#99ccff;

}

c)、标签接纳器:以标签字称起头,如p,span,div,*

div span

{

   font-size:14px;

}

自然幸好似伪类接受,a:hover,a:link,a:visted,a:active。

在CSS3中新增添了大多的采纳器,即便大家会jQuery,jQuery中多数采纳器在CSS3中都能够向来利用。

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:尽管那只是贰个案例,可是确实帮忙自个儿开阔思维,何况实际做二个如此的效能,只怕会花销相当多年华,起码对自身的话前段时间真就是那样子,主要困难依然布局定位和颜色的合理性搭配,技能使形象更是绘身绘色有板有眼!

屈居源代码:

本文由星彩网app下载发布于前端技术,转载请注明出处:CSS3与页面布局学习计算,使用CSS3画出一个机器猫

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。