CSS画出一个可爱神奇的多啦A梦
|
<div class="arm_rewrite"></div> </div>
<div class="hand_left"> <div class="arm"></div> <div class="circle"></div> <div class="arm_rewrite"></div> </div>
<div class="foot"> <div class="left"></div> <div class="right"></div> <div class="foot_rewrite"></div> </div>
</div>
</body> </html>
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; （编辑：晋中站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
