今天小编跟大家讲解下有关CSS画出一个可爱神奇的多啦A梦 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS画出一个可爱神奇的多啦A梦 的相关资料，希望小伙伴们看了有所帮助。
小叮当简单颜色单一，操作起来也很容易上手。接下来的一个实例就是用css画出一个多啦A梦，首先将其分为头部，和身体。然后，再根据身体各部分细节进行进一步的具体刻画。由于最近一直在学习JavaWeb方面的东西，所以，我的这个小叮当就是用jsp页面进行映衬。代码如下：首先是写jsp页面，将其分成多个块，然后再分块操作：
XML/HTML Code复制内容到剪贴板 <[email protected]="java"import="java.util.*"pageEncoding="utf-8"%> <% Stringpath=request.getContextPath(); StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"> <html> <head> <basehref="<%=basePath%>"> <linkrel="stylesheet"type="text/css"href="bootstrap-3.3.5-dist/css/bootstrap.min.css"> <linkrel="stylesheet"type="text/css"href="css/DLAM.css"> <title>here</title> <metahttp-equiv="pragma"content="no-cache"> <metahttp-equiv="cache-control"content="no-cache"> <metahttp-equiv="expires"content="0"> <metahttp-equiv="keywords"content="keyword1,keyword2,keyword3"> <metahttp-equiv="description"content="Thisismypage"> <!-- <linkrel="stylesheet"type="text/css"href="styles.css"> --> </head> <body> <divclass="doraemon"> <divclass="head"> <divclass="eyes"> <divclass="eyeleft"><divclass="blackbleft"></div></div> <divclass="eyeright"><divclass="blackbright"></div></div> </div> <divclass="face"> <divclass="white"></div> <divclass="nose"><divclass="light"></div></div> <divclass="nose_line"></div> <divclass="mouth"></div> <divclass="whiskers"> <divclass="whiskerrTopr160"></div> <divclass="whiskerrt"></div> <divclass="whiskerrBottomr20"></div> <divclass="whiskerlTopr20"></div> <divclass="whiskerlt"></div> <divclass="whiskerlBottomr160"></div> </div> </div> </div> <divclass="choker"> <divclass="bell"> <divclass="bell_line"></div> <divclass="bell_circle"></div> <divclass="bell_under"></div> <divclass="bell_light"></div> </div> </div> <divclass="bodys"> <divclass="body"></div> <divclass="wraps"></div> <divclass="pocket"></div> <divclass="pocket_mask"></div> </div> <divclass="hand_right"> <divclass="arm"></div> <divclass="circle"></div> <divclass="arm_rewrite"></div> </div> <divclass="hand_left"> <divclass="arm"></div> <divclass="circle"></div> <divclass="arm_rewrite"></div> </div> <divclass="foot"> <divclass="left"></div> <divclass="right"></div> <divclass="foot_rewrite"></div> </div> </div> </body> </html>再接下来就是每一个div的细致描写刻画：
XML/HTML Code复制内容到剪贴板 @CHARSET"UTF-8"; .CC{ font-size:100px; font-weight:600; font-family:"华文楷体"; text-align:center; } .doraemon{ position:relative; margin-top:5px; margin-left:530px; } .doraemon.head{ 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:#5552pxsolid; box-shadow:-5px10px15pxrgba(0,0,0,0.45); position:relative; } .doraemon.face{ position:relative; z-index:2; } .doraemon.face.white{ border:#0002pxsolid; width:265px; height:195px; border-radius:150px150px; position:absolute; top:75px;left:25px; background:#fff; background:-webkit-radial-gradient(righttop,#fff75%,#eee75%,#eee80%,#99990%,#444); background:-moz-radial-gradient(righttop,#fff75%,#eee75%,#eee80%,#99990%,#444); background:-ms-radial-gradient(righttop,#fff10%,#eee75%,#eee80%,#99990%,#444); } .doraemon.face.nose{ border:2pxsolid#000; width:30px; height:30px; border-radius:30px; position:absolute; background:#c93300; top:110px;left:140px; z-index:3; } .doraemon.face.nose.light{ border-radius:5px; box-shadow:19px8px5px#FFF; width:10px; height:10px; } .doraemon.face.nose_line{ background:#333; width:3px; height:100px; top:140px;left:155px; position:absolute; z-index:3; } .doraemon.face.mouth{ width:220px; height:400px; border-radius:120px; border-bottom:3pxsolid#333; position:absolute; top:-160px;left:45px; } .doraemon.eyes{ position:relative; z-index:3; } .doraemon.eyes.eye{ width:72px; height:82px; position:absolute; top:40px; background:#fff; border:2pxsolid#000; border-radius:35px35px; } .doraemon.eyes.eye.black{ width:14px; height:14px; background:#000; border-radius:14px; position:relative; top:40px; } .doraemon.eyes.left{ left:82px; } .doraemon.eyes.right{ left:156px; } .doraemon.eyes.eye.bleft{ left:50px; } .doraemon.eyes.eye.bright{ left:7px; } .doraemon.whiskers{ width:220px; height:80px; background:#fff; position:relative; border-radius:15px; top:120px;left:45px; z-index:2; } .doraemon.whiskers.whisker{ background:#333; width:60px; height:2px; position:absolute; z-index:2; } .doraemon.whiskers.rTop{ top:25px;left:165px; } .doraemon.whiskers.rt{ top:45px;left:167px; } .doraemon.whiskers.rBottom{ top:65px;left:165px; } .doraemon.whiskers.lTop{ top:25px;left:0px; } .doraemon.whiskers.lt{ top:45px;left:-2px; } .doraemon.whiskers.lBottom{ top:65px;left:0px; } .doraemon.whiskers.r160{ transform:rotate(160deg); -webkit-transform:rotate(160deg); } .doraemon.whiskers.r20{ transform:rotate(20deg); -webkit-transform:rotate(20deg); } .doraemon.choker{ position:relative; z-index:4; top:-40px;left:45px; 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#000000; border-radius:10px10px10px10px; width:230px; height:20px; } .doraemon.choker.bell{ width:40px; height:40px; _overflow:hidden; border-radius:50px; border:2pxsolid#000; 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:relative; top:5px;left:90px; } .doraemon.choker.bell_line{ background:#c40; border-radius:3px3px0px0px; border:2pxsolid#333333; height:2px;width:36px; position:relative; top:10px; } .doraemon.choker.bell_circle{ background:#000; border-radius:5px; height:10px;width:12px; position:relative; top:10px; left:13px; } .doraemon.choker.bell_circle{ background:#000; border-radius:5px; height:10px;width:12px; position:relative; top:10px; left:13px; } .doraemon.choker.bell_under{ background:#000; height:15px;width:3px; top:10px; left:18px; position:relative; } .doraemon.choker.bell_light{ border-radius:10px; box-shadow:19px8px5px#fff; height:11px;width:11px; position:relative; top:-34px; left:4px; opacity:0.7; } .doraemon.bodys{ position:relative; top:-310px; } .doraemon.bodys.body{ 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; height:165px;width:220px; position:absolute; top:265px; left:50px; } .doraemon.bodys.wraps{ 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,#fff50%,#eee75%,#eee83%,#99990%,#44495%,#000); background:-ms-linear-gradient(righttop,#fff,#fff50%,#eee75%,#eee83%,#99990%,#44495%,#000); border:2pxsolid#000; border-radius:85px; position:absolute; height:170px;width:170px; top:230px; left:72px; } .doraemon.bodys.pocket{ position:relative; height:130px;width: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; top:250px; left:92px; } .doraemon.bodys.pocket_mask{ position:relative; height:60px;width:134px; background:#fff; border-bottom:2pxsolid#000; top:125px; left:92px; } .doraemon.hand_right{ height:100px;width:100px; position:absolute; top:272px; left:248px; } .doraemon.hand_left{ height:100px;width:100px; position:absolute; top:272px; left:-10px; } .doraemon.arm{ 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; position:relative; height:50px;width:80px; box-shadow:-10px7px10pxrgba(0,0,0,0.35); z-index:-1; } .doraemon.hand_right.arm{ top:17px; transform:rotate(35deg); -webkit-transform:rotate(35deg); } .doraemon.hand_left.arm{ top:17px; background:#0096be; box-shadow:5px-7px10pxrgba(0,0,0,0.25); transform:rotate(145deg); -webkit-transform:rotate(145deg); } .doraemon.circle{ background:#fff; 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)); background:-moz-linear-gradient(righttop,#fff,#fff50%,#eee70%,#ddd80%,#999); position:absolute; height:60px;width:60px; border:2pxsolid#000; border-radius:30px; } .doraemon.hand_right.circle{ left:40px; top:32px; } .doraemon.hand_left.circle{ left:-20px; top:32px; } .doraemon.arm_rewrite{ background:#07beea; position:relative; height:45px;width:5px; } .doraemon.hand_right.arm_rewrite{ left:20px; top:-45px; } .doraemon.hand_left.arm_rewrite{ left:60px; top:-45px; background:#0096be; } .doraemon.foot{ height:40px; left:20px; position:relative; top:-141px; width:280px; } .doraemon.foot.left{ 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:-6px010pxrgba(0,0,0,0.35); height:30px; left:14px; position:relative; top:69px; width:125px; } .doraemon.foot.right{ 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:-6px010pxrgba(0,0,0,0.35); height:30px; left:141px; position:relative; top:39px; width:125px; } .doraemon.foot.foot_rewrite{ position:relative; top:0px; left:132px; _left:127px; width:20px; height:11px; 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-top:2pxsolid#000; border-right:2pxsolid#000; border-left:2pxsolid#000; border-top-right-radius:40px; border-top-left-radius:40px; }这个是整体的描绘，接下来，我来根据自己的理解更加深刻地理解每一个特效的来源。background:-webkit-radial-gradien ：这个属性是讲颜色的渐变，比如哆啦A梦的蓝色，从右上再到左下，颜色逐渐加深，线性渐变；线性渐变实例：
border-radius：转换为圆角；z-index：指定该元素的层叠顺序，比如说图片，若z-index为-1，覆盖在图片上面的字就会显示出来。rgba(0,0,0,0.45)：表示透明度的；—overflow:设置当元素的内容溢出其区域时发生的事情,hidden,隐藏。transform:转换和旋转；这里还有一个动画效果，目的是让小叮当的眼睛动起来~
CSS Code复制内容到剪贴板 <styletype="text/css"> @-webkit-keyframeseyemove{ 80%{margin:0;} 85%{margin:-20px000;} 90%{margin:0000;} 93%{margin:0007px;} 来源：爱蒂网
