JSDM

HTML

 
1
<div id="owl">  
2
<div id="hat"></div>
3
<div id="body">
4
    <div class="glass"><div class="left"></div><div class="right"></div></div>
5
    <div class="eye left"></div>
6
    <div class="eye right"></div>
7
    <div class="nose"></div>
8
    <div id="button"></div>
9
</div>
10
<div id="foot"><div class="left"></div><div class="right"></div></div>
11
<div id="wings"></div>
12
<div id="stick"></div>  
13
</div>

CSS

​x
 
1
* {
2
    -moz-box-sizing: border-box;
3
    box-sizing: border-box
4
    }
5
​
6
body {
7
    background-color: #40aade
8
    }
9
​
10
#owl {
11
    width: 100px;
12
    margin: 100px auto 0 auto
13
    }
14
​
15
#hat {
16
    width: 107px;
17
    height: 52px;
18
    background-color: #124057;
19
    -moz-border-radius: 50%;
20
    -webkit-border-radius: 50%;
21
    border-radius: 50%;
22
    position: absolute;
23
    margin: -12px 0 0 -23px;
24
    -moz-box-shadow: 0 -4px 0 #40aade;
25
    -webkit-box-shadow: 0 -4px 0 #40aade;
26
    box-shadow: 0 -4px 0 #40aade
27
    }
28
​
29
#hat:after {
30
    content: "";
31
    display: block;
32
    position: relative;
33
    width: 36px;
34
    height: 16px;
35
    -webkit-border-top-left-radius: 73px;
36
    -moz-border-radius-topleft: 73px;
37
    border-top-left-radius: 73px;
38
    -webkit-border-top-right-radius: 73px;
39
    -moz-border-radius-topright: 73px;
40
    border-top-right-radius: 73px;
41
    background-color: #124057;
42
    margin: -18px auto 0 auto;
43
    z-index: -1
44
    }
45
​
46
#body {
47
    width: 61px;
48
    height: 122px;
49
    background-color: #124057;
50
    border: 4px solid #40aade;
51
    -webkit-border-top-left-radius: 50px;
52
    -moz-border-radius-topleft: 50px;
53
    border-top-left-radius: 50px;
54
    -webkit-border-top-right-radius: 50px;
55
    -moz-border-radius-topright: 50px;
56
    border-top-right-radius: 50px;
57
    -webkit-border-bottom-left-radius: 50px;
58
    -moz-border-radius-bottomleft: 50px;
59
    border-bottom-left-radius: 50px;
60
    -webkit-border-bottom-right-radius: 50px;
61
    -moz-border-radius-bottomright: 50px;
62
    border-bottom-right-radius: 50px;
63
    position: relative
64
    }
65
​
66
#body:after {
67
    content: "";
68
    display: block;
69
    width: 53px;
70
    height: 83px;
71
    background-color: #124057;
72
    -moz-border-radius: 70px/100px;
73
    -webkit-border-radius: 70px/100px;
74
    border-radius: 70px/100px;
75
    margin: -47px 0 0 0
76
    }
77
​
78
.eye {
79
    margin-top: 24px;
80
    width: 17px;
81
    height: 17px;
82
    background-color: #40aade;
83
    -moz-box-shadow: 0 0 0 5px #124057, 0 0 0 9px #40aade;
84
    -webkit-box-shadow: 0 0 0 5px #124057, 0 0 0 9px #40aade;
85
    box-shadow: 0 0 0 5px #124057, 0 0 0 9px #40aade;
86
    -moz-border-radius: 50%;
87
    -webkit-border-radius: 50%;
88
    border-radius: 50%;
89
    float: left
90
    }
91
​
92
.eye.right {
93
    position: absolute;
94
    right: 3px
95
    }
96
​
97
.eye.left {
98
    margin-left: 3px
99
    }
100
​
101
.eye:before {
102
    content: "";
103
    display: block;
104
    width: 9px;
105
    height: 9px;
106
    background-color: #124057;
107
    -moz-border-radius: 50%;
108
    -webkit-border-radius: 50%;
109
    border-radius: 50%;
110
    margin: 4px 0 0 4px;
111
    position: absolute
112
    }
113
​
114
.eye:after {
115
    content: "";
116
    display: block;
117
    width: 3px;
118
    height: 3px;
119
    background-color: #40aade;
120
    position: absolute;
121
    margin: 5px 0 0 4px
122
    }
123
​
124
.nose {
125
    background-color: #124057;
126
    border: 4px solid #40aade;
127
    -webkit-border-top-left-radius: 3px;
128
    -moz-border-radius-topleft: 3px;
129
    border-top-left-radius: 3px;
130
    -webkit-border-top-right-radius: 3px;
131
    -moz-border-radius-topright: 3px;
132
    border-top-right-radius: 3px;
133
    -webkit-border-bottom-left-radius: 5px;
134
    -moz-border-radius-bottomleft: 5px;
135
    border-bottom-left-radius: 5px;
136
    -webkit-border-bottom-right-radius: 5px;
137
    -moz-border-radius-bottomright: 5px;
138
    border-bottom-right-radius: 5px;
139
    width: 15px;
140
    height: 20px;
141
    position: absolute;
142
    top: 38px;
143
    left: 19px;
144
    -moz-border-radius: 50% 50% 50% 50%/50% 50% 40% 40%;
145
    -webkit-border-radius: 50% 50% 50% 50%/50% 50% 40% 40%;
146
    border-radius: 50% 50% 50% 50%/50% 50% 40% 40%
147
    }
148
​
149
.nose:after {
150
    content: "";
151
    display: block;
152
    width: 2px;
153
    height: 5px;
154
    background-color: #40aade;
155
    margin: 3px 0 0 1px;
156
    -webkit-border-top-left-radius: 3px;
157
    -moz-border-radius-topleft: 3px;
158
    border-top-left-radius: 3px;
159
    -webkit-border-bottom-left-radius: 3px;
160
    -moz-border-radius-bottomleft: 3px;
161
    border-bottom-left-radius: 3px
162
    }
163
​
164
.nose:before {
165
    content: "";
166
    position: absolute;
167
    display: block;
168
    width: 11px;
169
    height: 5px;
170
    background-color: #124057;
171
    top: -14px;
172
    left: -1px
173
    }
174
​
175
#button {
176
    width: 5px;
177
    height: 18px;
178
    margin: 64px 0 0 23px;
179
    position: relative
180
    }
181
​
182
#button:before, #button:after {
183
    content: "";
184
    display: block;
185
    width: 5px;
186
    height: 5px;
187
    background-color: #40aade;
188
    -moz-border-radius: 2px;
189
    -webkit-border-radius: 2px;
190
    border-radius: 2px
191
    }
192
​
193
#button:after {
194
    margin: 10px 0 0 0
195
    }
196
​
197
#wings {
198
    width: 85px;
199
    height: 40px;
200
    -moz-border-radius: 90px;
201
    -webkit-border-radius: 90px;
202
    border-radius: 90px;
203
    background-color: #124057;
204
    position: absolute;
205
    margin: -69px 0 0 -12px;
206
    z-index: -1
207
    }
208
​
209
#stick {
210
    width: 95px;
211
    height: 7px;
212
    background-color: #124057;
213
    -moz-border-radius: 5px;
214
    -webkit-border-radius: 5px;
215
    border-radius: 5px;
216
    -moz-box-shadow: 0 3px 0 0 #40aade;
217
    -webkit-box-shadow: 0 3px 0 0 #40aade;
218
    box-shadow: 0 3px 0 0 #40aade;
219
    position: absolute;
220
    margin: -23px 0 0 -16px
221
    }
222
​
223
#foot div:before, #foot div:after {
224
    content: "";
225
    width: 5px;
226
    height: 10px;
227
    background-color: #40aade;
228
    position: absolute;
229
    display: block;
230
    -moz-border-radius: 3px;
231
    -webkit-border-radius: 3px;
232
    border-radius: 3px;
233
    position: initial;
234
    float: left
235
    }
236
​
237
#foot {
238
    position: absolute;
239
    display: block;
240
    margin: -29px 0 0 8px;
241
    width: 45px;
242
    z-index: 1
243
    }
244
​
245
#foot .right {
246
    position: absolute;
247
    right: 0
248
    }
249
​
250
.glass {
251
    margin: 28px 0 0 0;
252
    position: absolute;
253
    width: 68px;
254
    z-index: 1
255
    }
256
​
257
.glass .left, .glass .right {
258
    position: absolute;
259
    display: inline-block;
260
    width: 0;
261
    height: 0;
262
    line-height: 0;
263
    border: 8px solid #124057;
264
    border-bottom: none;
265
    -webkit-border-top-right-radius: 8px;
266
    -moz-border-radius-topright: 8px;
267
    border-top-right-radius: 8px;
268
    -webkit-border-top-left-radius: 8px;
269
    -moz-border-radius-topleft: 8px;
270
    border-top-left-radius: 8px
271
    }
272
​
273
.glass .left:before, .glass .right:before {
274
    content: "";
275
    display: block;
276
    width: 7px;
277
    height: 7px;
278
    background-color: #40aade;
279
    position: absolute;
280
    -moz-border-radius: 3px;
281
    -webkit-border-radius: 3px;
282
    border-radius: 3px;
283
    margin: -4px 0 0 -3px
284
    }
285
​
286
.glass .right:before {
287
    margin: -4px 0 0 -4px
288
    }
289
​
290
.glass .left {
291
    left: -14px
292
    }
293
​
294
.glass .right {
295
    right: 1px
296
    }
?   ?  
?   ?  
必须是有效的URL
+ 添加另一个资源

JS

xxxxxxxxxx
1
 
1
​
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................