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

网络
天成岩寺寺入山崖石做瓦，佛观殿外嶂连崖。碧空崖上水滴泄，胜似阳春雨打葩。

小叮当简单颜色单一，操作起来也很容易上手。接下来的一个实例就是用css画出一个多啦A梦，首先将其分为头部，和身体。然后，再根据身体各部分细节进行进一步的具体刻画。

由于最近一直在学习JavaWeb方面的东西，所以，我的这个小叮当就是用jsp页面进行映衬。

代码如下：首先是写jsp页面，将其分成多个块，然后再分块操作：

XML/HTML Code复制内容到剪贴板
  1. <%@pagelanguage="java"import="java.util.*"pageEncoding="utf-8"%>
  2. <%
  3. Stringpath=request.getContextPath();
  4. StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  7. <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
  8. <html>
  9. <head>
  10. <baserel="nofollow noopener noreferrer" href="<%=basePath%>">
  11. <linkrel="stylesheet"type="text/css"rel="nofollow noopener noreferrer" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
  12. <linkrel="stylesheet"type="text/css"rel="nofollow noopener noreferrer" href="css/DLAM.css">
  13. <title>here</title>
  15. <metahttp-equiv="pragma"content="no-cache">
  16. <metahttp-equiv="cache-control"content="no-cache">
  17. <metahttp-equiv="expires"content="0">
  18. <metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">
  19. <metahttp-equiv="description"content="Thisismypage">
  20. <!--
  21. <linkrel="stylesheet"type="text/css"rel="nofollow noopener noreferrer" href="styles.css">
  22. -->
  24. </head>
  25. <body>
  26. <divclass="doraemon">
  27. <divclass="head">
  28. <divclass="eyes">
  29. <divclass="eyeleft"><divclass="blackbleft"></div></div>
  30. <divclass="eyeright"><divclass="blackbright"></div></div>
  31. </div>
  33. <divclass="face">
  34. <divclass="white"></div>
  35. <divclass="nose"><divclass="light"></div></div>
  36. <divclass="nose_line"></div>
  37. <divclass="mouth"></div>
  38. <divclass="whiskers">
  39. <divclass="whiskerrTopr160"></div>
  40. <divclass="whiskerrt"></div>
  41. <divclass="whiskerrBottomr20"></div>
  42. <divclass="whiskerlTopr20"></div>
  43. <divclass="whiskerlt"></div>
  44. <divclass="whiskerlBottomr160"></div>
  45. </div>
  46. </div>
  47. </div>
  49. <divclass="choker">
  50. <divclass="bell">
  51. <divclass="bell_line"></div>
  52. <divclass="bell_circle"></div>
  53. <divclass="bell_under"></div>
  54. <divclass="bell_light"></div>
  55. </div>
  56. </div>
  58. <divclass="bodys">
  59. <divclass="body"></div>
  60. <divclass="wraps"></div>
  61. <divclass="pocket"></div>
  62. <divclass="pocket_mask"></div>
  63. </div>
  65. <divclass="hand_right">
  66. <divclass="arm"></div>
  67. <divclass="circle"></div>
  68. <divclass="arm_rewrite"></div>
  69. </div>
  71. <divclass="hand_left">
  72. <divclass="arm"></div>
  73. <divclass="circle"></div>
  74. <divclass="arm_rewrite"></div>
  75. </div>
  77. <divclass="foot">
  78. <divclass="left"></div>
  79. <divclass="right"></div>
  80. <divclass="foot_rewrite"></div>
  81. </div>
  83. </div>
  85. </body>
  86. </html>


再接下来就是每一个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. }
  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(righttop,#fff10%,#07bbee20%,#10a6ce75%,#000);
  20. background:-moz-radial-gradient(righttop,#fff10%,#07bbee20%,#10a6ce75%,#000);
  21. background:-ms-radial-gradient(righttop,#fff10%,#07bbee20%,#10a6ce75%,#000);
  22. border:#5552pxsolid;
  23. box-shadow:-5px10px15pxrgba(0,0,0,0.45);
  24. position:relative;
  25. }
  27. .doraemon.face{
  28. position:relative;
  29. z-index:2;
  30. }
  31. .doraemon.face.white{
  32. border:#0002pxsolid;
  33. width:265px;
  34. height:195px;
  35. border-radius:150px150px;
  36. position:absolute;
  37. top:75px;left:25px;
  38. background:#fff;
  39. background:-webkit-radial-gradient(righttop,#fff75%,#eee75%,#eee80%,#99990%,#444);
  40. background:-moz-radial-gradient(righttop,#fff75%,#eee75%,#eee80%,#99990%,#444);
  41. background:-ms-radial-gradient(righttop,#fff10%,#eee75%,#eee80%,#99990%,#444);
  42. }
  43. .doraemon.face.nose{
  44. border:2pxsolid#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:19px8px5px#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:3pxsolid#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:2pxsolid#000;
  86. border-radius:35px35px;
  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. }
  151. .doraemon.choker{
  152. position:relative;
  153. z-index:4;
  154. top:-40px;left:45px;
  155. background:#c40;
  156. background:-webkit-gradient(linear,lefttop,leftbottom,from(#c40),to(#800400));
  157. background:-moz-linear-gradient(centertop,#c40,#800400);
  158. background:-ms-linear-gradient(centertop,#c40,#800400);
  159. border:2pxsolid#000000;
  160. border-radius:10px10px10px10px;
  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:2pxsolid#000;
  170. background:#f9f12a;
  171. background:-webkit-gradient(linear,lefttop,leftbottom,from(#f9f12a),color-stop(0.5,#e9e11a),to(#a9a100));
  172. background:-moz-linear-gradient(top,#f9f12a,#e9e11a75%,#a9a100);
  173. background:-ms-linear-gradient(top,#f9f12a,#e9e11a75%,#a9a100);
  174. box-shadow:-5px5px10pxrgba(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:3px3px0px0px;
  181. border:2pxsolid#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;
  206. left:18px;
  207. position:relative;
  208. }
  209. .doraemon.choker.bell_light{
  210. border-radius:10px;
  211. box-shadow:19px8px5px#fff;
  212. height:11px;width:11px;
  213. position:relative;
  214. top:-34px;
  215. left:4px;
  216. opacity:0.7;
  217. }
  220. .doraemon.bodys{
  221. position:relative;
  222. top:-310px;
  223. }
  224. .doraemon.bodys.body{
  225. background:#07beea;
  226. background:-webkit-gradient(linear,righttop,lefttop,from(#07beea),color-stop(0.5,#0073b3),color-stop(0.75,#00b0e0),to(#0096be));
  227. background:-moz-linear-gradient(rightcenter,#07beea,#0073b350%,#00b0e075%,#0096be100%);
  228. background:-ms-linear-gradient(rightcenter,#07beea,#0073b350%,#00b0e075%,#0096be100%);
  229. border:2pxsolid#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,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));
  238. background:-moz-linear-gradient(righttop,#fff,#fff50%,#eee75%,#eee83%,#99990%,#44495%,#000);
  239. background:-ms-linear-gradient(righttop,#fff,#fff50%,#eee75%,#eee83%,#99990%,#44495%,#000);
  240. border:2pxsolid#000;
  241. border-radius:85px;
  242. position:absolute;
  243. height:170px;width:170px;
  244. top:230px;
  245. left:72px;
  246. }
  248. .doraemon.bodys.pocket{
  249. position:relative;
  250. height:130px;width:130px;
  251. border-radius:65px;
  252. background:#fff;
  253. 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));
  254. background:-moz-linear-gradient(righttop,#fff,#fff70%,#f8f8f875%,#eee80%,#ddd88%,#fff);
  255. background:-ms-linear-gradient(righttop,#fff,#fff70%,#f8f8f875%,#eee80%,#ddd88%,#fff);
  256. border:2pxsolid#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:2pxsolid#000;
  265. top:125px;
  266. left:92px;
  267. }
  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,lefttop,leftbottom,from(#07beea),color-stop(0.85,#07beea),to(#555));
  284. background:-moz-linear-gradient(centertop,#07beea,#07beea85%,#555);
  285. background:-ms-linear-gradient(centertop,#07beea,#07beea85%,#555);
  286. border:1pxsolid#000000;
  287. position:relative;
  288. height:50px;width:80px;
  289. box-shadow:-10px7px10pxrgba(0,0,0,0.35);
  290. z-index:-1;
  291. }
  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-7px10pxrgba(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,righttop,leftbottom,from(#fff),color-stop(0.5,#fff),color-stop(0.7,#eee),color-stop(0.8,#ddd),to(#999));
  308. background:-moz-linear-gradient(righttop,#fff,#fff50%,#eee70%,#ddd80%,#999);
  309. position:absolute;
  310. height:60px;width:60px;
  311. border:2pxsolid#000;
  312. border-radius:30px;
  313. }
  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,righttop,leftbottom,from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee),to(#999));
  347. background:-moz-linear-gradient(righttop,#fff,#fff75%,#eee85%,#999);
  348. background:-ms-linear-gradient(righttop,#fff,#fff75%,#eee85%,#999);
  349. border:2pxsolid#333;
  350. border-radius:80px60px60px40px;
  351. box-shadow:-6px010pxrgba(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,righttop,leftbottom,from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee),to(#999));
  361. background:-moz-linear-gradient(righttop,#fff,#fff75%,#eee85%,#999);
  362. background:-ms-linear-gradient(righttop,#fff,#fff75%,#eee85%,#999);
  363. border:2pxsolid#333;
  364. border-radius:80px60px60px40px;
  365. box-shadow:-6px010pxrgba(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,righttop,leftbottom,from(#666),color-stop(0.83,#fff),to(#fff));
  381. background:-moz-linear-gradient(righttop,#666,#fff83%,#fff);
  382. background:-ms-linear-gradient(righttop,#666,#fff83%,#fff);
  383. border-top:2pxsolid#000;
  384. border-right:2pxsolid#000;
  385. border-left:2pxsolid#000;
  386. border-top-right-radius:40px;
  387. border-top-left-radius:40px;
  388. }


这个是整体的描绘，接下来，我来根据自己的理解更加深刻地理解每一个特效的来源。

background:-webkit-radial-gradien ：这个属性是讲颜色的渐变，比如哆啦A梦的蓝色，从右上再到左下，颜色逐渐加深，线性渐变；

线性渐变实例：

border-radius：转换为圆角；

z-index：指定该元素的层叠顺序，比如说图片，若z-index为-1，覆盖在图片上面的字就会显示出来。

rgba(0,0,0,0.45)：表示透明度的；

—overflow:设置当元素的内容溢出其区域时发生的事情,hidden,隐藏。

transform:转换和旋转；

这里还有一个动画效果，目的是让小叮当的眼睛动起来~

CSS Code复制内容到剪贴板
  1. <styletype="text/css">
  2. @-webkit-keyframeseyemove{
  3. 80%{margin:0;}
  4. 85%{margin:-20px000;}
  5. 90%{margin:0000;}
  6. 93%{margin:0007px;}
  7. 96%{margin:0000;}
  8. }
  9. @-webkit-keyframeseyemove{
  10. 80%{margin:0;}
  11. 85%{margin:-20px000;}
  12. 90%{margin:0000;}
  13. 93%{margin:0007px;}
  14. 96%{margin:0000;}
  15. }
  16. @-webkit-keyframeseyemove{
  17. 80%{margin:0;}
  18. 85%{margin:-20px000;}
  19. 90%{margin:0000;}
  20. 93%{margin:0007px;}
  21. 96%{margin:0000;}
  22. }
  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. }
  40. </style>


最后再来看一看哆啦A梦的最终效果图。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
您可能有感兴趣的文章
CSS画出各种三角形如等边三角形