1 doctype html>
2 <html>
3
4 <head>
5 <meta charset="utf-8">
6 <title>Baymaxtitle>
7
8 <style>
9 body {
10 background: #595959;
11 }
12
13 #baymax {
14
15 /*设置为 居中*/
16 margin: 0 auto;
17
18 /*高度*/
19 height: 600px;
20
21 /*隐藏溢出*/
22 overflow: hidden;
23 }
24
25 #head {
26 height: 64px;
27 width: 100px;
28
29 /*以百分比定义圆角的形状*/
30 border-radius: 50%;
31
32 /*背景*/
33 background: #fff;
34 margin: 0 auto;
35 margin-bottom: -20px;
36
37 /*设置下边框的样式*/
38 border-bottom: 5px solid #e0e0e0;
39
40 /*属性设置元素的堆叠顺序;
41 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面*/
42 z-index: 100;
43
44 /*生成相对定位的元素*/
45 position: relative;
46 }
47
48 #eye,
49 #eye2 {
50 width: 11px;
51 height: 13px;
52 background: #282828;
53 border-radius: 50%;
54 position: relative;
55 top: 30px;
56 left: 27px;
57
58 /*旋转该元素*/
59 transform: rotate(8deg);
60 }
61
62 #eye2 {
63
64 /*使其旋转对称*/
65 transform: rotate(-8deg);
66 left: 69px;
67 top: 17px;
68
69 }
70
71 #mouth {
72 width: 38px;
73 height: 1.5px;
74 background: #282828;
75 position: relative;
76 left: 34px;
77 top: 10px;
78 }
79
80 #torso,
81 #belly {
82 margin: 0 auto;
83 height: 200px;
84 width: 180px;
85 background: #fff;
86 border-radius: 47%;
87
88 /*设置边框*/
89 border: 5px solid #e0e0e0;
90 border-top: none;
91 z-index: 1;
92 }
93
94 #belly {
95 height: 300px;
96 width: 245px;
97 margin-top: -140px;
98 z-index: 5;
99 }
100
101 #cover {
102 width: 190px;
103 background: #fff;
104 height: 150px;
105 margin: 0 auto;
106 position: relative;
107 top: -20px;
108 border-radius: 50%;
109 }
110
111 #heart{
112 width:25px;
113 height:25px;
114 border-radius:50%;
115 position:relative;
116
117 /*向边框四周添加阴影效果*/
118 box-shadow:2px 5px 2px #ccc inset;
119
120 right:-115px;
121 top:40px;
122 z-index:111;
123 border:1px solid #ccc;
124 }
125
126 #left-arm,
127 #right-arm {
128 height: 270px;
129 width: 120px;
130 border-radius: 50%;
131 background: #fff;
132 margin: 0 auto;
133 position: relative;
134 top: -350px;
135 left: -100px;
136 transform: rotate(20deg);
137 z-index: -1;
138 }
139
140 #right-arm {
141 transform: rotate(-20deg);
142 left: 100px;
143 top: -620px;
144 }
145
146
147 #l-bigfinger,
148 #r-bigfinger {
149 height: 50px;
150 width: 20px;
151 border-radius: 50%;
152 background: #fff;
153 position: relative;
154 top: 250px;
155 left: 50px;
156 transform: rotate(-50deg);
157 }
158
159 #r-bigfinger {
160 left: 50px;
161 transform: rotate(50deg);
162 }
163
164 #l-smallfinger,
165 #r-smallfinger {
166 height: 35px;
167 width: 15px;
168 border-radius: 50%;
169 background: #fff;
170 position: relative;
171 top: 195px;
172 left: 66px;
173 transform: rotate(-40deg);
174 }
175
176 #r-smallfinger {
177 background: #fff;
178 transform: rotate(40deg);
179 top: 195px;
180 left: 37px;
181 }
182
183 #left-leg,
184 #right-leg {
185 height: 170px;
186 width: 90px;
187 border-radius: 40% 30% 10px 45%;
188 background: #fff;
189 position: relative;
190 top: -640px;
191 left: -45px;
192 transform: rotate(-1deg);
193 z-index: -2;
194 margin: 0 auto;
195 }
196
197 #right-leg {
198 background: #fff;
199 border-radius:30% 40% 45% 10px;
200 margin: 0 auto;
201 top: -810px;
202 left: 50px;
203 transform: rotate(1deg);
204 }
205
206 style>
207
208 head>
209
210 <body>
211 <div id="baymax">
212
213
214 <div id="head">
215 <div id="eye">div>
216 <div id="eye2">div>
217 <div id="mouth">div>
218 div>
219
220
221 <div id="torso">
222 <div id="heart">div>
223 div>
224
225
226 <div id="belly">
227 <div id="cover">div>
228 div>
229
230
231 <div id="left-arm">
232 <div id="l-bigfinger">div>
233 <div id="l-smallfinger">div>
234 div>
235
236
237 <div id="right-arm">
238 <div id="r-bigfinger">div>
239 <div id="r-smallfinger">div>
240 div>
241
242
243 <div id="left-leg">div>
244
245
246 <div id="right-leg">div>
247
248 div>
249 body>
250
251 html>