<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><p class="doraemon"> <p class="head"> <p class="eyes"> <p class="eye left"><p class="black bleft"></p></p> <p class="eye right"><p class="black bright"></p></p> </p> <p class="face"> <p class="white"></p> <p class="nose"><p class="light"></p></p> <p class="nose_line"></p> <p class="mouth"></p> <p class="mouth"></p> <p class="whiskers"> <p class="whisker rTop r160"></p> <p class="whisker rt"></p> <p class="whisker rBottom r20"></p> <p class="whisker lTop r20"></p> <p class="whisker lt"></p> <p class="whisker lBottom r160"></p> </p> </p> </p> <p class="choker"> <p class="bell"> <p class="bell_line"></p> <p class="bell_circle"></p> <p class="bell_under"></p> <p class="bell_light"></p> </p> </p> <p class="bodys"> <p class="body"></p> <p class="wraps"></p> <p class="pocket"></p> <p class="pocket_mask"></p> </p> <p class="hand_right"> <p class="arm"></p> <p class="circle"></p> <p class="arm_rewrite"></p> </p> <p class="hand_left"> <p class="arm"></p> <p class="circle"></p> <p class="arm_rewrite"></p> </p> <p class="foot"> <p class="left"></p> <p class="right"></p> <p class="foot_rewrite"></p> </p> </p></p></body></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; } /*眼睛*/ .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 .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 .face{ position: relative; z-index: 2; } /*自然底色*/ .doraemon .face .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); } /*鼻子*/ .doraemon .face .nose{ width:30px; height: 30px; background: #c93300; border:2px solid #000; border-radius: 30px; position:absolute; top:110px; left:140px; z-index: 3; } /*鼻子上面的光*/ .doraemon .face .nose .light{ border-radius: 5px ; box-shadow: 19px 8px 5px #fff; height: 10px ; width:10px; } /*鼻子下面的線*/ .doraemon .face .nose_line { width:3px; height: 100px; background: #333; position:absolute; top:143px; left:155px; z-index: 3; } /*嘴巴*/ .doraemon .face .mouth{ width:220px; height: 400px; border-bottom: 3px solid #333; border-radius: 120px; position:absolute; top:-160px; left: 45px; } /*鬍鬚*/ .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); } /*圍脖*/.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; height: 20px;width: 230px;}/*鈴鐺*/.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;}/*雙橫線*/.doraemon .choker .bell_line{ background:#F9F12A; 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: 14px; left: 14px;}/*黑點下的線*/.doraemon .choker .bell_under { background:#000; height: 15px;width: 3px; left: 18px;top: 10px; position: relative; }/*高光*/.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;}/*肚子*/.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;}/*白色肚兜*/.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;}/*口袋*/.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;}/*擋住口袋一半*/.doraemon .bodys .pocket_mask{ position:relative; width:134px;height:60px; background:#fff; border-bottom:2px solid #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, 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;}/*右手手臂*/.doraemon .hand_right .arm { top: 17px; transform: rotate(35deg);-webkit-transform:rotate(35deg);}/*左手手臂*/.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);}/*圓形手掌公用部分*/.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); }/*右手手掌*/.doraemon .hand_right .circle{ left:40px;top:32px;}/*左手手掌*/.doraemon .hand_left .circle{ left:-20px;top:32px;}/*手臂和身體結合處*/.doraemon .arm_rewrite{ background:#07BEEA; height: 45px;width:5px; position: relative;}/*右手結合處*/.doraemon .hand_right .arm_rewrite{ top: -45px;left:22px;}/*左手結合處*/.doraemon .hand_left .arm_rewrite{ top: -45px;left:60px;background:#0096be}/*腳*/.doraemon .foot { height: 40px; left: 20px; position: relative; top: -141px; width: 280px;}/*左腳*/.doraemon .foot .left { 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;}/*右腳*/.doraemon .foot .right { 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;}/*讓眼睛動起來*/@-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:0 0 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
