<!doctype html>
<style>. doraemon{position:relative; width:500px; margin:0 Auto; }. 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; }/* eyes */. Doraemon. eyes{position:relative; }. Doraemon. eyes. eye{width:72px; height:82px; Position:absolute; top:40px; Background: #fff; border:2px solid #000; border-radius:35px 35px; Z-index:10; }. Doraemon. eyes. 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. bleft{left:50px; }. Doraemon. eyes. bright{left:7px; }. Doraemon. face{position:relative; Z-index:2; }/* Natural background */. Doraemon. white{border:2px #000 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 80%, #999 90%, #444); Background:-moz-radial-gradient (right top, #fff 75%, #eee 80%, #999 90%, #444); Background:-ms-radial-gradient (right top, #fff 75%, #eee 80%, #999 90%, #444); }/* nose */. Doraemon. nose{width:30px; height:30px; Background: #c93300; border:2px solid #000; border-radius:30px; Position:absolute; top:110px; left:140px; Z-index:3; }/* Light above the nose */. Doraemon. nose. light{border-radius:5px; BOX-SHADOW:19PX 8px 5px #fff; height:10px; width:10px; }/* Line under the nose */. Doraemon. nose_line {width:3px; height:100px; Background: #333; Position:absolute; top:143px; left:155px; Z-index:3; }/* mouth */. Doraemon. mouth{width:220px; height:400px; BORDER-BOTTOM:3PX solid #333; border-radius:120px; Position:absolute; top:-160px; left:45px; }/* Beard */. Doraemon. whiskers{background: #fff; width:220px; height:80px; position:relative; top:120px; left:45px; border-radius:15px; Z-index:2; }. Doraemon. Whiskers. whisker{background: #333; height:2px; width:60px; Position:absolute; Z-index:2; }. Doraemon. whiskers. rtop{left:165px; top:25px; }. Doraemon. whiskers. rt{left:167px; top:45px; }. Doraemon. whiskers. rbottom{left:165px; top:65px; }. Doraemon. whiskers. ltop{left:0; top:25px; }. Doraemon. whiskers. lt{top:45px; left:-2px; }. Doraemon. whiskers. lbottom{top:65px; left:0; }. Doraemon. whiskers. r160 {transform:rotate (160deg); -webkit-transform:rotate (160DEG); }. Doraemon. Whiskers. r20{transform:rotate (20DEG); -webkit-transform:rotate (20DEG); }/* Scarf */.doraemon. choker{position:relative;z-index:4; Top: -40px;left:45px; Background: #C40; /* Linear gradient makes the scarf look more natural */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; height:20px;width:230px;} /* Bell */.doraemon. Choker bell{width:40px;height:40px; _overflow:hidden;/*ie6 hack*/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;} /* Double horizontal line */.doraemon. Choker bell_line{background: #F9F12A; border-radius:3px 3px 0px 0px; border:2px solid #333333; height:2px;width:36px; position:relative;top:10px;} /* Black dot */.doraemon. Choker. bell_circle {background: #000; border-radius:5px; height:10px; width:12px; position:relative; top:14px; left:14px;} /* line under Black dot */.doraemon. Choker. Bell_undeR {background: #000; height:15px;width:3px; left:18px;top:10px; position:relative; }/* High-gloss */.doraemon. Choker. bell_light {border-radius:10px; BOX-SHADOW:19PX 8px 5px #FFF; height:12px;width:12px; Left:5px;top: -35px; position:relative; opacity:0.7;}. Doraemon. bodys{position:relative;top:-310px;} /* Belly */.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; left:50px;top:265px;} /* White Dudou */.doraemon. Bodys. wraps{background: #FFF; 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)); Background:-moz-linear-gradient (right top, #FFF, #FFF 75%, #EEE 83%, #999 90%, #444 95%, #000); Background:-ms-linear-gradient (right top, #FFF, #FFF 75%, #EEE 83%, #999 90%, #444 95%, #000); border:2px solid #000; border-radius:85px; Position:absolute; height:170px;width:170px; left:72px;top:230px;} /* Pocket */.doraemon. bodys. pocket{position:relative; width:130px;height:130px; border-radius:65px; Background: #fff; 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)); Background:-moz-linear-gradient (right top, #fff, #fff 70%, #f8f8f8 75%, #eee 80%, #ddd 88%, #fff); Background:-ms-linear-gradient (right top, #fff, #fff 70%, #f8f8f8 75%, #eee 80%, #ddd 88%, #fff); border:2px solid #000; top:250px;left:92px;} /* block pocket half */.doraemon. bodys. pocket_mask{position:relative; width:134px;height:60px; Background: #fff; border-bottom:2px solid #000; top:125px;left:92px;} /* right hand */.doraemon. hand_right{height:100px;width:100px; Position:absolute; top:272px;left:248px;} /* Left */.doraemon. hand_left{height:100px;width:100px; Position:absolute; top:272px;left:-10px;} /* Arm public part */.doraemon. arm {background: #07BEEA; Background:-webkit-gradient (linear, left top, left bottom, from (#07beea), Color-stop (0.85, #07beea), to (#555)); Background:-moz-linear-gradient (center top, #07BEEA, #07BEEA 85%, #555); Background:-ms-linear-gradient (center top, #07BEEA, #07BEEA 85%, #555); border:1px solid #000000; Box-shadow: -10px 7px 10px rgba (0, 0, 0, 0.35); height:50px;width:80px; Z-index:-1;position:relative;} /* Right arm */.doraemon. Hand_right. arm {top:17px; Transform:rotate (35deg);-webkit-transform:rotate (35deg);} /* left arm */.doraemon. hand_left Arm {top:17px;background: #0096BE; box-shadow:5px-7px 10px rgba (0, 0, 0, 0.25); Transform:rotate (145deg);-webkit-transform:rotate (145deg);} /* Round palm Common part */.doraemon. circle{Position:absolute; width:60px;height:60px; border-radius:30px; border:2px solid #000; Background: #fff; Background:-webkit-gradient (linear, right top, left bottom, from (#fff), Color-stop (0.5, #fff), Color-stop (0.70, #eee), Color-stop (0.8, #ddd), to (#999)); Background:-moz-linear-gradient (right top, #fff, #fff 50%, #eee 70%, #ddd 80%, #999); }/* right hand palm */.doraemon. hand_right. circle{left:40px;top:32px;} /* Left hand palm */.doraemon. hand_left. circle{left:-20px;top:32px;} /* Arm and body joint */.doraemon. arm_rewrite{background: #07BEEA; height:45px;width:5px; Position:relative;} /* Right-hand joint */.doraemon hand_right. arm_rewrite{top: -45px;left:22px;} /* Left-hand joint */.doraemon hand_left arm_rewrite{top: -45px;left:60px;background: #0096be}/* foot */.doraemon. foot {Height:4 0px; left:20px; position:relative; Top: -141px; width:280px;} /* Left foot */.doraemon. Foot. {BackgrounD: #fff; Background:-webkit-gradient (linear, right top, left bottom, from (#fff), Color-stop (0.75, #fff), Color-stop (0.85, #eee), to (#999)); Background:-moz-linear-gradient (right top, #fff, #fff 75%, #EEE 85%, #999); Background:-ms-linear-gradient (right top, #fff, #fff 75%, #EEE 85%, #999); border:2px solid #333; border-radius:80px 60px 60px 40px; Box-shadow: -6px 0 10px rgba (0, 0, 0, 0.35); height:30px; left:8px; position:relative; top:65px; width:125px;} /* right foot */.doraemon. Foot. {background: #fff; Background:-webkit-gradient (linear, right top, left bottom, from (#fff), Color-stop (0.75, #fff), Color-stop (0.85, #eee), to (#999)); Background:-moz-linear-gradient (right top, #fff, #fff 75%, #EEE 85%, #999); Background:-ms-linear-gradient (right top, #fff, #fff 75%, #EEE 85%, #999); border:2px solid #333; border-radius:80px 60px 60px 40px; box-shadow:-6px 0px 10px Rgba (0,0,0,0.35); height:30px;width:125px; top:31px;left:141px; Position:relative;}. Doraemon. Foot. foot_rewrite{position:relative;top:-11px;left:130px;_left:127px; width:20px;height:10px; Background: #fff; Background:-webkit-gradient (linear, right top, left bottom, from (#666), Color-stop (0.83, #fff), to (#fff)); Background:-moz-linear-gradient (right top, #666, #fff 83%, #fff); Background:-ms-linear-gradient (right top, #666, #fff 83%, #fff); border-top:2px solid #000; border-right:2px solid #000; border-left:2px solid #000; border-top-right-radius:40px; border-top-left-radius:40px;} /* Let the eyes move */@-webkit-keyframes eyemove{80%{margin:0;} 85%{margin:-20px 0 0 0;} 90%{margin:0 0 0 0;} 93%{margin:0 0 0 7px;} 96%{margin:0 0 0 0;}} @-moz-keyframes eyemove{80%{margin:0;} 85%{margin:-20px 0 0 0;} 90%{margin:0 0 0 0;} 93%{margin:0 0 0 7px;} 96%{margin:0 0 0 0;}} @-ms-keyframes eyemove{80%{margin:0;} 85%{margin:-20px 0 0 0;} 90%{margin:0 0 0 0;} 93%{margin:00 0 7px;} 96%{margin:0 0 0 0;}} </style>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
