<!DOCTYPE html><html><head><meta charset="utf-8"><title>哆啦A梦</title><style type="text/css">.big {width: 500px;height: 530px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}.head {width: 300px;height: 300px;border-radius: 150px;border: 2px solid #333;background-image: -webkit-radial-gradient(99% 1%, #fff, #0C99C7 75%, black 100%);/* 放射性渐变 */background-image: -moz-radial-gradient(99% 1%, #fff, #0C99C7 75%, black 100%);background-image: -ms-radial-gradient(99% 1%, #fff, #0C99C7 75%, black 100%);box-shadow: -5px 5px 15px 2px #888;position: absolute;left: 0;right: 0;margin: auto;}.face {width: 250px;height: 210px;border-radius: 175px;background-color: #fff;position: relative;left: 25px;top: 65px;}.left_eye {width: 60px;height: 70px;border-radius: 30px;border: 2px solid black;background-color: #fff;position: relative;top: -170px;left: 87px;}.left_eyeball {width: 12px;height: 12px;border-radius: 6px;background-color: black;position: relative;top: 10px;left: 40px;animation-name: cat;animation-duration: 2s;animation-timing-function: linear;animation-fill-mode: backwards;animation-iteration-count: infinite;animation-direction: alternate;}.right_eye {width: 60px;height: 70px;border-radius: 30px;border: 2px solid black;background-color: #fff;position: relative;top: -242px;left: 149px;}.right_eyeball {width: 12px;height: 12px;border-radius: 6px;background-color: black;position: relative;top: 8px;left: 10px;animation-name: cat;animation-duration: 2s;animation-timing-function: linear;animation-fill-mode: backwards;animation-iteration-count: infinite;animation-direction: alternate;}@keyframes cat {from {transform: translate(0, 0);}20% {transform: translate(7px, 7px);}40% {transform: translate(0px, 14px);}60% {transform: translate(7px, 21px);}80% {transform: translate(0px, 28px);}to {transform: translate(7px, 35px);}}.nose {width: 28px;height: 28px;border-radius: 14px;border: 2px solid black;background-image: -webkit-radial-gradient(10px at 80% 40%, #fff, #cb3a00);position: relative;top: -254px;left: 133px;}.mouth {width: 1px;height: 100px;border: 1px solid black;background-color: black;position: relative;top: -458px;left: 147px;}.smile {width: 200px;height: 200px;border-radius: 100px;border-bottom: 4px solid black;position: relative;left: 48px;top: -354px;}.gai {width: 200px;height: 65px;background-color: #fff;position: relative;top: 100px;}.beard {width: 70px;height: 1px;border: 0.3px solid black;background-color: black;}.lt {position: relative;top: -555px;left: 40px;transform: rotate(15deg);}.lm {position: relative;top: -535px;left: 40px;}.lb {position: relative;top: -515px;left: 40px;transform: rotate(-15deg);}.gt {position: relative;top: -564px;left: 185px;transform: rotate(-15deg);}.gm {position: relative;top: -544px;left: 185px;}.gb {position: relative;top: -524px;left: 185px;transform: rotate(15deg);}.body {width: 200px;height: 200px;background-color: #07abdd;border: 2px solid #333;position: relative;top: 290px;left: 148px;z-index: 10;}.tummy {width: 150px;height: 150px;border-radius: 75px;background-color: #fff;border: 2px solid #000;position: relative;left: 25px;top: -10px;}.pocket {width: 120px;height: 120px;border-radius: 60px;background-color: #fff;border: 2px solid #000;position: relative;left: 15px;top: 15px;}.gai_2 {width: 124px;height: 62px;background-color: #fff;border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom: 2px solid black;position: relative;left: -2px;top: -2px;}.left_hand {width: 70px;height: 55px;background-color: #07abdd;border: 2px solid #333;position: relative;top: 120px;left: 98px;transform-origin: 0 50%;transform: rotate(-30deg);box-shadow: -5px 2px 10px 2px #333;}.right_hand {width: 70px;height: 55px;background-color: #07abdd;border: 2px solid #333;position: relative;top: 23px;left: 336px;transform-origin: 0 50%;transform: rotate(30deg);box-shadow: -5px 2px 10px 2px #333;}.left_palm {width: 70px;height: 70px;border-radius: 35px;border: 2px solid #333;background-color: #fff;position: relative;left: 50px;top: 3px;}.right_palm {width: 70px;height: 70px;border-radius: 35px;border: 2px solid #333;background-color: #fff;position: relative;left: 373px;top: -73px;}.rod {width: 210px;height: 25px;border-radius: 100px;border: 2px solid #000;background-image: linear-gradient(to top, #640C04, #B13206);position: relative;left: 143px;top: -200px;z-index: 20;}.gai_3 {width: 5px;height: 60px;background-color: #07abdd;position: relative;left: 148px;top: -215px;z-index: 15}.gai_4 {width: 5px;height: 60px;background-color: #07abdd;position: relative;left: 348px;top: -275px;z-index: 15;}.dang {width: 20px;height: 20px;border-radius: 10px;background-color: #fff;border: 2px solid #333;position: relative;left: 238px;top: -140px;z-index: 15;}.dang_gai {width: 24px;height: 10px;background-color: #fff;position: relative;top: 12px;left: -2px;}.left_foot {width: 110px;height: 30px;border: 2px solid #333;border-top-right-radius: 45px;border-bottom-right-radius: 45px;border-top-left-radius: 65px;border-bottom-left-radius: 45px;background-color: #fff;position: relative;left: 130px;top: -157px;z-index: 15;box-shadow: -1px 0px 10px 2px #333;}.right_foot {width: 110px;height: 30px;border: 2px solid #333;border-top-right-radius: 65px;border-bottom-right-radius: 45px;border-top-left-radius: 45px;border-bottom-left-radius: 45px;background-color: #fff;position: relative;left: 255px;top: -191px;z-index: 15;box-shadow: -1px 1px 10px 2px #333;}.bell {width: 36px;height: 36px;border-radius: 18px;background-image: radial-gradient(10px at 75% 25%, #fff, #CDC60B);border: 2px solid #000;position: relative;left: 230px;top: -430px;z-index: 30;}.inbell_1 {width: 34px;height: 3px;border: 2px solid #000;border-top-left-radius: 3px;border-top-right-radius: 4px;background-color: none;position: relative;top: 9px;left: -1px;}.inbell_2 {width: 10px;height: 10px;border-radius: 5px;background-color: #000;position: relative;top: 13px;left: 12px;}.inbell_3 {width: 2px;height: 10px;background-color: #000;position: relative;left: 16px;top: 10px;}</style></head><body><div class="big"><div class="head"><div class="face"></div><div class="left_eye"><div class="left_eyeball"></div></div><div class="right_eye"><div class="right_eyeball"></div></div><div class="nose"></div><div class="smile"><div class="gai"></div></div><div class="mouth"></div><div class="beard lt"></div><div class="beard lm"></div><div class="beard lb"></div><div class="beard gt"></div><div class="beard gm"></div><div class="beard gb"></div></div><div class="body"><div class="tummy"><div class="pocket"><div class="gai_2"></div></div></div></div><div class="left_hand"></div><div class="right_hand"></div><div class="left_palm"></div><div class="right_palm"></div><div class="rod"></div><div class="gai_3"></div><div class="gai_4"></div><div class="dang"><div class="dang_gai"></div></div><div class="left_foot"></div><div class="right_foot"></div><div class="bell"><div class="inbell_1"></div><div class="inbell_2"></div><div class="inbell_3"></div></div></div></body>
