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

发布时间：2020-03-17 02:04:03 所属栏目：系统来源：站长网

导读：副标题#e# 小叮当简单颜色单一，操作起来也很容易上手。接下来的一个实例就是用css画出一个多啦A梦，首先将其分为头部，和身体。然后，再根据身体各部分细节进行进一步的具体刻画。由于最近一直在学习JavaWeb方面的东西，所以，我的这个小叮当就是用jsp页

</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(right top,#fff 10%, #07bbee 20%,#10a6ce 75%,#000);

background:-moz-radial-gradient(right top,#fff 10%, #07bbee 20%,#10a6ce 75%,#000);

background:-ms-radial-gradient(right top,#fff 10%, #07bbee 20%,#10a6ce 75%,#000);

border:#555 2px solid;

box-shadow:-5px 10px 15px rgba(0,0,0,0.45);

position:relative;

}

.doraemon .face{

position:relative;

z-index:2;

}

.doraemon .face .white{

border:#000 2px solid;

width:265px;

height:195px;

border-radius:150px 150px;

position:absolute;

top:75px;left:25px;

background:#fff;

background:-webkit-radial-gradient(right top,#fff 75%, #eee 75%,#eee 80%,#999 90%,#444);

background:-moz-radial-gradient(right top,#fff 75%, #eee 75%,#eee 80%,#999 90%,#444);

background:-ms-radial-gradient(right top,#fff 10%, #eee 75%,#eee 80%,#999 90%,#444);

}

.doraemon .face .nose{

border: 2px solid #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:19px 8px 5px #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:3px solid #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: 2px solid #000;

border-radius:35px 35px;

}

.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,left top,left bottom,from(#c40),to(#800400));

background:-moz-linear-gradient(center top,#c40,#800400);

background:-ms-linear-gradient(center top,#c40,#800400);

border: 2px solid #000000;

border-radius:10px 10px 10px 10px;

width:230px;

height:20px;

}

.doraemon .choker .bell{

width:40px;

height:40px;

_overflow:hidden;

border-radius:50px;

border: 2px solid #000;

background:#f9f12a;

background:-webkit-gradient(linear,left top,left bottom,from(#f9f12a),color-stop(0.5,#e9e11a),to(#a9a100));

background:-moz-linear-gradient(top,#f9f12a,#e9e11a 75%,#a9a100);

background:-ms-linear-gradient(top,#f9f12a,#e9e11a 75%,#a9a100);

box-shadow:-5px 5px 10px rgba(0,0,0,0.25);

position:relative;

top:5px;left:90px;

}

.doraemon .choker .bell_line{

background:#c40;

border-radius:3px 3px 0px 0px;

border:2px solid #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:19px 8px 5px #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,right top,left top,from(#07beea),color-stop(0.5,#0073b3),color-stop(0.75,#00b0e0),to(#0096be));

background:-moz-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);

background:-ms-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);

border: 2px solid #333;

height:165px;width:220px;

position:absolute;

top:265px;

left:50px;

}

.doraemon .bodys .wraps{

background:#fff;

（编辑：辽源站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

6/15

首页

尾页