html>
<html lang="zh-cn">
<head><meta charset="utf-8" /><title>机器猫title><meta name="author" content="" /><meta name="copyright" content="" /><style>.wrapper{margin: 50px 0 0 500px;}.doraemon{position: relative;}.doraemon .head {position:relative;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:2px solid #555;box-shadow:-5px 10px 15px rgba(0,0,0,0.45);}/*脸部*/
.doraemon .face {position: relative; /*让所有脸部元素可自由定位*/
z-index: 2; /*脸在头部背景上面*/
}/*白色脸底*/
.doraemon .face .white {width: 265px; /*设置宽高*/
height: 195px;border-radius: 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;border-radius:15px;background:#c93300;border:2px solid #000;position:absolute;top:110px;left:140px;z-index:3; /*鼻子在白色脸底下面*/
}/*鼻子上的高光*/
.doraemon .face .nose .light {width:10px;height:10px;border-radius: 5px;box-shadow: 19px 8px 5px #fff; /*通过阴影实现高光*/
}/*鼻子下的线*/
.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 .eyes {position: relative;z-index: 3; /*眼睛在白色脸底下面*/
}/*眼睛共同的样式*/
.doraemon .eyes .eye{width:72px;height:82px;background:#fff;border:2px solid #000;border-radius:35px 35px;position:absolute;top:40px;} /*眼珠*/
.doraemon .eyes .eye .black{width:14px;height:14px;background:#000;border-radius:7px;position:absolute;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;border-radius:15px;position:absolute;top:120px;left:45px;z-index:2; /*在鼻子和眼睛下面*/
}/*所有胡子的公用样式*/
.doraemon .whiskers .whisker {width: 60px;height: 2px;background: #333;position: absolute;z-index: 2;}/*右上胡子*/
.doraemon .whiskers .rTop {left: 165px;top: 25px;}/*右中胡子*/
.doraemon .whiskers .rMiddle {left: 167px;top: 45px;}/*右下胡子*/
.doraemon .whiskers .rBottom {left: 165px;top: 65px;}/*左上胡子*/
.doraemon .whiskers .lTop {left: 0;top: 25px;}/*左中胡子*/
.doraemon .whiskers .lMiddle {left: -2px;top: 45px;}/*左下胡子*/
.doraemon .whiskers .lBottom {left: 0;top: 65px;}/*胡子旋转角度*/
.doraemon .whiskers .r160 {-webkit-transform: rotate(160deg);-moz-transform: rotate(160deg);-ms-transform: rotate(160deg);-o-transform: rotate(160deg);transform: rotate(160deg);}.doraemon .whiskers .r20 {-webkit-transform: rotate(200deg);-moz-transform: rotate(200deg);-ms-transform: rotate(200deg);-o-transform: rotate(200deg);transform: rotate(200deg);}/*围脖*/
.doraemon .choker {width: 230px;height: 20px;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 #000;border-radius: 10px;position: relative;top: -40px;left: 45px;z-index: 4;}/*铃铛*/
.doraemon .choker .bell {width: 40px;height: 40px;_overflow: hidden; /*IE6 hack*/
border: 2px solid #000;border-radius: 50px;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: absolute;top: 5px;left: 90px;}/*双横线*/
.doraemon .choker .bell_line {width: 36px;height: 2px;background: #f9f12a;border: 2px solid #333;border-radius: 3px 3px 0 0;position: absolute;top: 10px;}/*黑点*/
.doraemon .choker .bell_circle{width:12px;height:10px;background:#000;border-radius:5px;position:absolute;top:20px;left:14px;}/*黑点下的线*/
.doraemon .choker .bell_under{width: 3px;height:15px;background:#000;position:absolute;left: 18px;top:27px;}/*铃铛高光*/
.doraemon .choker .bell_light{width:12px;height:12px;border-radius:10px;box-shadow:19px 8px 5px #fff;position:absolute;top:-5px;left:5px;opacity:0.7;}/*身子*/
.doraemon .bodys {position: relative;top: -310px;}/*肚子*/
.doraemon .bodys .body {width: 220px;height: 165px;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;position:absolute;top:265px;left:50px;}/*白色肚兜*/
.doraemon .bodys .wraps {width: 170px;height: 170px;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;left: 72px;top: 230px;}/*口袋*/
.doraemon .bodys .pocket {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;position:absolute;top: 250px;left: 92px;}/*挡住口袋一半*/
.doraemon .bodys .pocket_mask {width: 134px;height: 60px;background:#fff;border-bottom: 2px solid #000;position:absolute;top: 259px;left: 92px;}/*左右手*/
.doraemon .hand_right, .doraemon .hand_left {height: 100px;width: 100px;position: absolute;top: 272px;left: 248px;}/*左手*/
.doraemon .hand_left {left: -10px;}/*手臂公共部分*/
.doraemon .arm {width:80px;height:50px;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);z-index: -1;position: relative;}/*右手手臂*/
.doraemon .hand_right .arm {top: 17px;-webkit-transform: rotate(35deg);-moz-transform: rotate(35deg);-ms-transform: rotate(35deg);-o-transform: rotate(35deg);transform: rotate(35deg);}/*左手手臂*/
.doraemon .hand_left .arm {top: 17px;background: #0096be; /*背光一面使用纯色，使其有立体感*/
box-shadow: 5px -7px 10px rgba(0, 0, 0, 0.25);-webkit-transform: rotate(145deg);-moz-transform: rotate(145deg);-ms-transform: rotate(145deg);-o-transform: rotate(145deg);transform: rotate(145deg);}/*圆形手掌公共部分*/
.doraemon .circle {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);background: -ms-linear-gradient(right top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999);position: absolute;}/*右手手掌*/
.doraemon .hand_right .circle {left: 40px;top: 32px;}/*左手手掌*/
.doraemon .hand_left .circle {left: -20px;top: 32px;}/*手臂和身体结合处，使用背景遮住边框*/
.doraemon .arm_rewrite {height: 45px;width: 5px;background: #07beea;position: relative;}/*右手结合处*/
.doraemon .hand_right .arm_rewrite {top: -45px;left: 22px;}/*左手结合处*/
.doraemon .hand_left .arm_rewrite {top: -45px;left: 60px;background: #0096be; /*同理，背光一面使用纯色，使其有立体感*/
}/*脚部*/
.doraemon .foot {width: 280px;height: 40px;position: relative;top: 55px;left: 20px;}/*左右脚共同样式*/
.doraemon .foot .left, .doraemon .foot .right {width: 125px;height: 30px;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);position: relative;}.doraemon .foot .left {left: 8px;top: 65px;}.doraemon .foot .right {top: 31px;left: 141px;}/*双脚之间的缝隙，加阴影使用立体感*/
.doraemon .foot .foot_rewrite {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: 2px solid #000;border-bottom: none;border-radius: 40px 40px 0 0;position: relative;top: -11px;left: 130px;_left: 127px;}/*眼珠*/
.doraemon .eyes .eye .black {width: 14px;height: 14px;background: #000;border-radius: 7px;position: absolute;top: 40px;-webkit-animation: eyemove 3s linear infinite;-moz-animation: eyemove 3s linear infinite;-ms-animation: eyemove 3s linear infinite;-o-animation: eyemove 3s linear infinite;animation: eyemove 3s linear infinite;}/*让眼睛动起来*/
@-webkit-keyframes eyemove {70%{margin:0 0 0 0;}80% {margin: -22px 0 0 0;}85% {margin: -22px 0 0 5px;}90% {margin: -22px 10px 0 0;}93% {margin: -22px 0 0 0;}96% {margin: 0 0 0 0;}}@-moz-keyframes eyemove {70% {margin: 0 0 0 0;}80% {margin: -22px 0 0 0;}85% {margin: -22px 0 0 5px;}90% {margin: -22px 10px 0 0;}93% {margin: -22px 0 0 0;}96% {margin: 0 0 0 0;}}@-o-keyframes eyemove {70% {margin: 0 0 0 0;}80% {margin: -22px 0 0 0;}85% {margin: -22px 0 0 5px;}90% {margin: -22px 10px 0 0;}93% {margin: -22px 0 0 0;}96% {margin: 0 0 0 0;}}@keyframes eyemove {70% {margin: 0 0 0 0;}80% {margin: -22px 0 0 0;}85% {margin: -22px 0 0 5px;}90% {margin: -22px 10px 0 0;}93% {margin: -22px 0 0 0;}96% {margin: 0 0 0 0;}}style>
head>
<body>
<div class="wrapper">
<div class="doraemon">
<div class="head">
<div class="eyes"><div class="eye left">
<div class="black bleft">div>div><div class="eye right"><div class="black bright">div>div>div>
<div class="face">
<div class="white">div>
<div class="nose">
<div class="light">div>div>
<div class="nose_line">div>
<div class="mouth">div>
<div class="whiskers"><div class="whisker rTop r160">div><div class="whisker rMiddle">div><div class="whisker rBottom r20">div><div class="whisker lTop r20">div><div class="whisker lMiddle">div><div class="whisker lBottom r160">div>div>div>div>
<div class="choker">
<div class="bell"><div class="bell_line">div><div class="bell_circle">div><div class="bell_under">div><div class="bell_light">div>div>div>
<div class="bodys">
<div class="body">div>
<div class="wraps">div>
<div class="pocket">div>
<div class="pocket_mask">div>div>
<div class="hand_right">
<div class="arm">div>
<div class="circle">div>
<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>
div>body>
html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
