CSS画出一个可爱神奇的多啦A梦

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

CSS画出⼀个可爱神奇的多啦A梦
⼩叮当简单颜⾊单⼀，操作起来也很容易上⼿。

接下来的⼀个实例就是⽤css画出⼀个多啦A梦，⾸先将其分为头部，和⾝体。

然后，再根据⾝体各部分细节进⾏进⼀步的具体刻画。

由于最近⼀直在学习JavaWeb⽅⾯的东西，所以，我的这个⼩叮当就是⽤jsp页⾯进⾏映衬。

代码如下：⾸先是写jsp页⾯，将其分成多个块，然后再分块操作：
XML/HTML Code复制内容到剪贴板
1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
2. <%
3. String path = request.getContextPath();
4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
5. %>
6.
7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
8. <html>
9. <head>
10. <base href="<%=basePath%>">
11. <link rel="stylesheet" type="text/css" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
12. <link rel="stylesheet" type="text/css" href="css/DLAM.css">
13. <title>here</title>
14.
15. <meta http-equiv="pragma" content="no-cache">
16. <meta http-equiv="cache-control" content="no-cache">
17. <meta http-equiv="expires" content="0">
18. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
19. <meta http-equiv="description" content="This is my page">
20. 
23.
24. </head>
25. <body>
26. <div class="doraemon">
27. <div class="head">
28. <div class="eyes">
29. <div class="eye left"><div class="black bleft"></div></div>
30. <div class="eye right"><div class="black bright"></div></div>
31. </div>
32.
33. <div class="face">
34. <div class="white"></div>
35. <div class="nose"><div class="light"></div></div>
36. <div class="nose_line"></div>
37. <div class="mouth"></div>
38. <div class="whiskers">
39. <div class="whisker rTop r160"></div>
40. <div class="whisker rt"></div>
41. <div class="whisker rBottom r20"></div>
42. <div class="whisker lTop r20"></div>
43. <div class="whisker lt"></div>
44. <div class="whisker lBottom r160"></div>
45. </div>
46. </div>
47. </div>
48.
49. <div class="choker">
50. <div class="bell">
51. <div class="bell_line"></div>
52. <div class="bell_circle"></div>
53. <div class="bell_under"></div>
54. <div class="bell_light"></div>
55. </div>
56. </div>
57.
58. <div class="bodys">
59. <div class="body"></div>
60. <div class="wraps"></div>
61. <div class="pocket"></div>
62. <div class="pocket_mask"></div>
63. </div>
64.
65. <div class="hand_right">
66. <div class="arm"></div>
67. <div class="circle"></div>
68. <div class="arm_rewrite"></div>
69. </div>
70.
71. <div class="hand_left">
72. <div class="arm"></div>
73. <div class="circle"></div>
74. <div class="arm_rewrite"></div>
75. </div>
76.
77. <div class="foot">
78. <div class="left"></div>
79. <div class="right"></div>
80. <div class="foot_rewrite"></div>
81. </div>
82.
83. </div>
84.
85. </body>
86. </html>
87.
再接下来就是每⼀个div的细致描写刻画：
XML/HTML Code复制内容到剪贴板
1. @CHARSET "UTF-8";
2. .CC{
3. font-size:100px;
4. font-weight:600;
5. font-family:"华⽂楷体";
6. text-align: center;
7. }
8.
9. .doraemon{
10. position:relative;
11. margin-top:5px;
12. margin-left:530px;
13. }
14. .doraemon .head{
15. width:320px;
16. height:300px;
17. border-radius:150px;
18. background:#07bbee;
19. background:-webkit-radial-gradient(right top,#fff 10%, #07bbee 20%,#10a6ce 75%,#000);
20. background:-moz-radial-gradient(right top,#fff 10%, #07bbee 20%,#10a6ce 75%,#000);
21. background:-ms-radial-gradient(right top,#fff 10%, #07bbee 20%,#10a6ce 75%,#000);
22. border:#555 2px solid;
23. box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
24. position:relative;
25. }
26.
27. .doraemon .face{
28. position:relative;
29. z-index:2;
30. }
31. .doraemon .face .white{
32. border:#000 2px solid;
33. width:265px;
34. height:195px;
35. border-radius:150px 150px;
36. position:absolute;
37. top:75px;left:25px;
38. background:#fff;
39. background:-webkit-radial-gradient(right top,#fff 75%, #eee 75%,#eee 80%,#999 90%,#444);
40. background:-moz-radial-gradient(right top,#fff 75%, #eee 75%,#eee 80%,#999 90%,#444);
41. background:-ms-radial-gradient(right top,#fff 10%, #eee 75%,#eee 80%,#999 90%,#444);
42. }
43. .doraemon .face .nose{
44. border: 2px solid #000;
45. width:30px;
46. height:30px;
47. border-radius:30px;
48. position:absolute;
49. background:#c93300;
50. top:110px;left:140px;
51. z-index:3;
52. }
53. .doraemon .face .nose .light{
54. border-radius:5px;
55. box-shadow:19px 8px 5px #FFF;
56. width:10px;
57. height:10px;
58. }
59. .doraemon .face .nose_line{
60. background:#333;
61. width:3px;
62. height:100px;
63. top:140px;left:155px;
64. position:absolute;
65. z-index:3;
66. }
67. .doraemon .face .mouth{
68. width:220px;
69. height:400px;
70. border-radius:120px;
71. border-bottom:3px solid #333;
72. position:absolute;
73. top:-160px;left:45px;
74. }
75. .doraemon .eyes{
76. position:relative;
77. z-index:3;
78. }
79. .doraemon .eyes .eye{
80. width:72px;
81. height:82px;
82. position:absolute;
83. top:40px;
84. background:#fff;
85. border: 2px solid #000;
86. border-radius:35px 35px;
87. }
88. .doraemon .eyes .eye .black{
89. width:14px;
90. height:14px;
91. background:#000;
92. border-radius:14px;
93. position:relative;
94. top:40px;
95. }
96. .doraemon .eyes .left{
97. left:82px;
98. }
99. .doraemon .eyes .right{ 100. left:156px;
101. }
102. .doraemon .eyes .eye .bleft{ 103. left:50px;
104. }
105. .doraemon .eyes .eye .bright{ 106. left:7px;
107. }
108. .doraemon .whiskers{
109. width:220px;
110. height:80px;
111. background:#fff;
112. position:relative;
113. border-radius:15px;
114. top:120px;left:45px;
115. z-index:2;
116. }
117. .doraemon .whiskers .whisker{ 118. background:#333;
119. width:60px;
120. height:2px;
121. position:absolute;
122. z-index:2;
123. }
124. .doraemon .whiskers .rTop{ 125. top:25px;left:165px;
126. }
127. .doraemon .whiskers .rt{ 128. top:45px;left:167px;
129. }
130. .doraemon .whiskers .rBottom{ 131. top:65px;left:165px;
132. }
133. .doraemon .whiskers .lTop{ 134. top:25px;left:0px;
135. }
136. .doraemon .whiskers .lt{ 137. top:45px;left:-2px;
138. }
139. .doraemon .whiskers .lBottom{ 140. top:65px;left:0px;
141. }
142. .doraemon .whiskers .r160{ 143. transform:rotate(160deg);
144. -webkit-transform:rotate(160deg);
145. }
146. .doraemon .whiskers .r20{
147. transform:rotate(20deg);
148. -webkit-transform:rotate(20deg);
149. }
150.
151. .doraemon .choker{
152. position:relative;
153. z-index:4;
154. top:-40px;left:45px;
155. background:#c40;
156. background:-webkit-gradient(linear,left top,left bottom,from(#c40),to(#800400));
157. background:-moz-linear-gradient(center top,#c40,#800400);
158. background:-ms-linear-gradient(center top,#c40,#800400);
159. border: 2px solid #000000;
160. border-radius:10px 10px 10px 10px;
161. width:230px;
162. height:20px;
163. }
164. .doraemon .choker .bell{
165. width:40px;
166. height:40px;
167. _overflow:hidden;
168. border-radius:50px;
169. border: 2px solid #000;
170. background:#f9f12a;
171. background:-webkit-gradient(linear,left top,left bottom,from(#f9f12a),color-stop(0.5,#e9e11a),to(#a9a100)); 172. background:-moz-linear-gradient(top,#f9f12a,#e9e11a 75%,#a9a100);
173. background:-ms-linear-gradient(top,#f9f12a,#e9e11a 75%,#a9a100);
174. box-shadow:-5px 5px 10px rgba(0,0,0,0.25);
175. position:relative;
176. top:5px;left:90px;
177. }
178. .doraemon .choker .bell_line{
179. background:#c40;
180. border-radius:3px 3px 0px 0px;
181. border:2px solid #333333;
182. height:2px;width:36px;
183. position:relative;
184. top:10px;
185. }
186. .doraemon .choker .bell_circle{
187. background:#000;
188. border-radius:5px;
189. height:10px;width:12px;
190. position:relative;
191. top:10px;
192. left:13px;
193. }
194. .doraemon .choker .bell_circle{
195. background:#000;
196. border-radius:5px;
197. height:10px;width:12px;
198. position:relative;
199. top:10px;
200. left:13px;
201. }
202. .doraemon .choker .bell_under{
203. background:#000;
204. height:15px;width:3px;
205. top:10px;
207. position:relative;
208. }
209. .doraemon .choker .bell_light{
210. border-radius:10px;
211. box-shadow:19px 8px 5px #fff;
212. height:11px;width:11px;
213. position:relative;
214. top:-34px;
215. left:4px;
216. opacity:0.7;
217. }
218.
219.
220. .doraemon .bodys{
221. position:relative;
222. top:-310px;
223. }
224. .doraemon .bodys .body{
225. background:#07beea;
226. background:-webkit-gradient(linear,right top,left top,from(#07beea),color-stop(0.5,#0073b3),color-stop(0.75,#00b0e0),to(#0096be));
227. background:-moz-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);
228. background:-ms-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);
229. border: 2px solid #333;
230. height:165px;width:220px;
231. position:absolute;
232. top:265px;
233. left:50px;
234. }
235. .doraemon .bodys .wraps{
236. background:#fff;
237. 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));
238. background:-moz-linear-gradient(right top,#fff,#fff 50%,#eee 75%,#eee 83%,#999 90%,#444 95%,#000); 239. background:-ms-linear-gradient(right top,#fff,#fff 50%,#eee 75%,#eee 83%,#999 90%,#444 95%,#000);
240. border: 2px solid #000;
241. border-radius:85px;
242. position:absolute;
243. height:170px;width:170px;
244. top:230px;
245. left:72px;
246. }
247.
248. .doraemon .bodys .pocket{
249. position:relative;
250. height:130px;width:130px;
251. border-radius:65px;
252. background:#fff;
253. 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));
254. background:-moz-linear-gradient(right top,#fff,#fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%,#fff);
255. background:-ms-linear-gradient(right top,#fff,#fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%,#fff);
256. border: 2px solid #000;
257. top:250px;
258. left:92px;
259. }
260. .doraemon .bodys .pocket_mask{
261. position:relative;
262. height:60px;width:134px;
263. background:#fff;
264. border-bottom:2px solid #000;
266. left:92px;
267. }
268.
269. .doraemon .hand_right{
270. height:100px;width:100px;
271. position:absolute;
272. top:272px;
273. left:248px;
274. }
275. .doraemon .hand_left{
276. height:100px;width:100px;
277. position:absolute;
278. top:272px;
279. left:-10px;
280. }
281. .doraemon .arm{
282. background:#07beea;
283. background:-webkit-gradient(linear,left top,left bottom,from(#07beea),color-stop(0.85,#07beea),to(#555)); 284. background:-moz-linear-gradient(center top,#07beea,#07beea 85%,#555);
285. background:-ms-linear-gradient(center top,#07beea,#07beea 85%,#555);
286. border: 1px solid #000000;
287. position:relative;
288. height:50px;width:80px;
289. box-shadow:-10px 7px 10px rgba(0,0,0,0.35);
290. z-index:-1;
291. }
292.
293. .doraemon .hand_right .arm{
294. top:17px;
295. transform:rotate(35deg);
296. -webkit-transform:rotate(35deg);
297. }
298. .doraemon .hand_left .arm{
299. top:17px;
300. background:#0096be;
301. box-shadow:5px -7px 10px rgba(0,0,0,0.25);
302. transform:rotate(145deg);
303. -webkit-transform:rotate(145deg);
304. }
305. .doraemon .circle{
306. background:#fff;
307. background:-webkit-gradient(linear,right top,left bottom,from(#fff),color-stop(0.5,#fff),color-stop(0.7,#eee),color-stop(0.8,#ddd),to(#999));
308. background:-moz-linear-gradient(right top,#fff,#fff 50%,#eee 70%,#ddd 80%,#999);
309. position:absolute;
310. height:60px;width:60px;
311. border: 2px solid #000;
312. border-radius:30px;
313. }
314.
315. .doraemon .hand_right .circle{
316. left:40px;
317. top:32px;
318. }
319. .doraemon .hand_left .circle{
320. left:-20px;
321. top:32px;
322. }
323. .doraemon .arm_rewrite{
324. background:#07beea;
325. position:relative;
326. height:45px;width:5px;
327. }
328. .doraemon .hand_right .arm_rewrite{
329. left:20px;
330. top:-45px;
331. }
332. .doraemon .hand_left .arm_rewrite{
333. left:60px;
334. top:-45px;
335. background:#0096be;
336. }
337. .doraemon .foot{
338. height:40px;
339. left:20px;
340. position:relative;
341. top:-141px;
342. width:280px;
343. }
344. .doraemon .foot .left{
345. background:#fff;
346. background:-webkit-gradient(linear,right top,left bottom,from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee),to(#999)); 347. background:-moz-linear-gradient(right top,#fff,#fff 75%,#eee 85%,#999);
348. background:-ms-linear-gradient(right top,#fff,#fff 75%,#eee 85%,#999);
349. border: 2px solid #333;
350. border-radius:80px 60px 60px 40px;
351. box-shadow:-6px 0 10px rgba(0,0,0,0.35);
352. height:30px;
353. left:14px;
354. position:relative;
355. top:69px;
356. width:125px;
357. }
358. .doraemon .foot .right{
359. background:#fff;
360. background:-webkit-gradient(linear,right top,left bottom,from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee),to(#999)); 361. background:-moz-linear-gradient(right top,#fff,#fff 75%,#eee 85%,#999);
362. background:-ms-linear-gradient(right top,#fff,#fff 75%,#eee 85%,#999);
363. border: 2px solid #333;
364. border-radius:80px 60px 60px 40px;
365. box-shadow:-6px 0 10px rgba(0,0,0,0.35);
366. height:30px;
367. left:141px;
368. position:relative;
369. top:39px;
370. width:125px;
371. }
372. .doraemon .foot .foot_rewrite{
373. position:relative;
374. top:0px;
375. left:132px;
376. _left:127px;
377. width:20px;
378. height:11px;
379. background:#fff;
380. background:-webkit-gradient(linear,right top,left bottom,from(#666),color-stop(0.83,#fff),to(#fff));
381. background:-moz-linear-gradient(right top,#666,#fff 83%,#fff);
382. background:-ms-linear-gradient(right top,#666,#fff 83%,#fff);
383. border-top:2px solid #000;
384. border-right:2px solid #000;
385. border-left:2px solid #000;
386. border-top-right-radius:40px;
387. border-top-left-radius:40px;
388. }
389.
这个是整体的描绘，接下来，我来根据⾃⼰的理解更加深刻地理解每⼀个特效的来源。

background:-webkit-radial-gradien ：这个属性是讲颜⾊的渐变，⽐如哆啦A梦的蓝⾊，从右上再到左下，颜⾊逐渐加深，线性渐变；
线性渐变实例：
border-radius：转换为圆⾓；
z-index：指定该元素的层叠顺序，⽐如说图⽚，若z-index为-1，覆盖在图⽚上⾯的字就会显⽰出来。

rgba(0,0,0,0.45)：表⽰透明度的；
—overflow:设置当元素的内容溢出其区域时发⽣的事情,hidden,隐藏。

transform:转换和旋转；
这⾥还有⼀个动画效果，⽬的是让⼩叮当的眼睛动起来~
CSS Code复制内容到剪贴板
1. <style type="text/css">
2. @-webkit-keyframes eyemove{
3. 80%{margin:0; }
4. 85%{margin:-20px 0 0 0;}
5. 90%{margin:0 0 0 0;}
6. 93%{margin:0 0 0 7px;}
7. 96%{margin:0 0 0 0;}
8. }
9. @-webkit-keyframes eyemove{
10. 80%{margin:0; }
11. 85%{margin:-20px 0 0 0;}
12. 90%{margin:0 0 0 0;}
13. 93%{margin:0 0 0 7px;}
14. 96%{margin:0 0 0 0;}
15. }
16. @-webkit-keyframes eyemove{
17. 80%{margin:0; }
18. 85%{margin:-20px 0 0 0;}
19. 90%{margin:0 0 0 0;}
20. 93%{margin:0 0 0 7px;}
21. 96%{margin:0 0 0 0;}
22. }
23.
24. .doraemon .eyes .eye .black{
25. -webkit-animation-name:eyemove;
26. -webkit-animation-duration: 5s;
27. -webkit-animation-timing-function:linear;
28. -webkit-animation-iteration-count: 20000;
29. -webkit-animation-name:eyemove;
30. -webkit-animation-duration: 5s;
31. -webkit-animation-timing-function:linear;
32. -webkit-animation-iteration-count: 20000;
33. -webkit-animation-name:eyemove;
34. -webkit-animation-duration: 5s;
35. -webkit-animation-timing-function:linear;
36. -webkit-animation-iteration-count: 20000;
37. }
38.
39.
40. </style>
最后再来看⼀看哆啦A梦的最终效果图。

以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。