纯CSS3实现兔斯基简单害羞表情

<div class="tuzki_container"><div class="tuzki"><div class="leftear"></div><div class="rightear"></div><div class="header"><div class="lefteye"></div><div class="righteye"></div><div class="leftcheek"></div><div class="rightcheek"></div></div><div class="body"></div><div class="hearts"><div class="heart"></div></div></div></div>

.tuzki_container{position:relative;}.tuzki{width:220px;height:300px;margin:50px auto;position: relative;overflow:hidden;}.header{width:194px;height:170px;background:#fff;border:8px solid #000;border-radius:194px/170px;-webkit-transform:rotate(2deg);-moz-transform:rotate(2deg);-o-transform:rotate(2deg);-ms-transform:rotate(2deg);transform:rotate(2deg);position: absolute;top:45px;left:0;overflow:hidden;z-index:2;}.header:before{content:'';display:block;width:200px;height:140px;border-bottom:40px solid rgba(198,207,212,0.7);border-radius:150px;margin-top:-5px;z-index:5;position:absolute;}.header .lefteye,.header .righteye{width:58px;height:8px;background:#000;border-radius:5px;-webkit-transform:rotate(5deg);-moz-transform:rotate(5deg);-o-transform:rotate(5deg);-ms-transform:rotate(5deg);transform:rotate(5deg);position: absolute;top:70px;left:10px;}.header .righteye{top:78px;left:100px;}.leftcheek{width:26px;height:26px;background:#ff6666;border-radius:50%;box-shadow:0 0 5px #ff6666;position: absolute;top:95px;left:3px;opacity:0.9;-webkit-animation:cheekscale 1s ease-out infinite;-moz-animation:cheekscale 1s ease-out infinite;-o-animation:cheekscale 1s ease-out infinite;-ms-animation:cheekscale 1s ease-out infinite;animation:cheekscale 1s ease-out infinite;}.rightcheek{width:30px;height:30px;background:#ff6666;border-radius:50%;box-shadow:0 0 5px #ff6666;position: absolute;top:105px;left:140px;opacity:0.9;-webkit-animation:cheekscale 1s ease-out infinite;-moz-animation:cheekscale 1s ease-out infinite;-o-animation:cheekscale 1s ease-out infinite;-ms-animation:cheekscale 1s ease-out infinite;animation:cheekscale 1s ease-out infinite;}@-webkit-keyframes cheekscale {0%{-webkit-transform:scale(1);opacity:0;}100%{-webkit-transform:scale(1.1);box-shadow:0 0 10px #ff6666;opacity:0.6;}}@-moz-keyframes cheekscale {0%{-moz-transform:scale(1);opacity:0;}100%{-moz-transform:scale(1.1);box-shadow:0 0 10px #ff6666;opacity:0.6;}}@-o-keyframes cheekscale {0%{-o-transform:scale(1);opacity:0;}100%{-o-transform:scale(1.1);box-shadow:0 0 10px #ff6666;opacity:0.6;}}@-ms-keyframes cheekscale {0%{-ms-transform:scale(1);opacity:0;}100%{-ms-transform:scale(1.1);box-shadow:0 0 10px #ff6666;opacity:0.6;}}@keyframes cheekscale {0%{transform:scale(1);opacity:0;}100%{transform:scale(1.1);box-shadow:0 0 10px #ff6666;opacity:0.6;}}

.leftear{width:22px;height:50px;border:7px solid #000;border-radius:34px/62px;position:absolute;top:2px;left:75px;-webkit-transform:rotate(6deg);-moz-transform:rotate(6deg);-o-transform:rotate(6deg);-ms-transform:rotate(6deg);transform:rotate(6deg);}.rightear{width:22px;height:80px;background:#fff;border:7px solid #000;border-top-left-radius:34px 62px;border-top-right-radius:34px 62px;border-bottom-left-radius:34px 100px;border-bottom-right-radius:34px 100px;-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);-o-transform:rotate(20deg);-ms-transform:rotate(20deg);transform:rotate(20deg);position:absolute;left:140px;top:3px;z-index:3;}.rightear:after{content:'';display:block;width:30px;height:15px;background:#fff;position: absolute;bottom:-7px;left:-5px;}

.body{width:100px;height:100px;background:#fff;border:8px solid #000;border-left:6px solid #000;border-top-left-radius:54px 130px;border-top-right-radius:54px 130px;border-bottom-left-radius:20px 100px;border-bottom-right-radius:20px 100px;-webkit-transform:rotate(-3deg);-moz-transform:rotate(-3deg);-o-transform:rotate(-3deg);-ms-transform:rotate(-3deg);transform:rotate(-3deg);position: absolute;top:215px;left:65px;}.body:before{content:'';display:block;width:40px;height:100px;border:7px solid #000;border-right:none;border-top:none;border-top-left-radius:30px 50px;border-top-right-radius:30px 50px;border-bottom-left-radius:24px 80px;-webkit-transform:rotate(19deg);-moz-transform:rotate(19deg);-o-transform:rotate(19deg);-ms-transform:rotate(19deg);transform:rotate(19deg);position: absolute;left:-19px;top:-2px;}.body:after{content:'';display:block;width:20px;height:60px;border-right:6px solid #000;border-radius:50px;position: absolute;left:57px;top:30px;}

.heart,.heart:before{display: inline-block;width: 20px;height: 30px;border-radius: 10px;background: #ff6666;position: absolute;top:-10px;left:12.7px;-webkit-transform-origin: bottom right;-moz-transform-origin: bottom right;-o-transform-origin: bottom right;-ms-transform-origin: bottom right;transform-origin: bottom right;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);}.heart:before{content: '';-webkit-transform-origin: bottom left;-moz-transform-origin: bottom left;-o-transform-origin: bottom left;-ms-transform-origin: bottom left;transform-origin: bottom left;-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-o-transform: rotate(90deg);-ms-transform: rotate(90deg);transform: rotate(90deg);top:-18px;left:2px;}.heart:after{content: '';width: 0;height: 0;border-left:10.8px solid transparent;border-right:10.8px solid transparent;border-top:12px solid #ff6666;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);position: absolute;top:22.6px;left:-7.3px;}.hearts{opacity:0;-webkit-transform:rotate(-30deg) translate3d(-10px,-15px,0);-moz-transform:rotate(-30deg) translate3d(-10px,-15px,0);-o-transform:rotate(-30deg) translate3d(-10px,-15px,0);-ms-transform:rotate(-30deg) translate3d(-10px,-15px,0);transform:rotate(-30deg) translate3d(-10px,-15px,0);-webkit-animation:heartmove 1s ease-in infinite;-moz-animation:heartmove 1s ease-in infinite;-o-animation:heartmove 1s ease-in infinite;-ms-animation:heartmove 1s ease-in infinite;animation:heartmove 1s ease-in infinite;}@-webkit-keyframes heartmove {0%{opacity:0;-webkit-transform:rotate(-30deg) translate3d(-10px,-15px,0);}100%{opacity:0.6;-webkit-transform:rotate(-30deg) translate3d(-10px,-25px,0);}}@-moz-keyframes heartmove {0%{opacity:0;-moz-transform:rotate(-30deg) translate3d(-10px,-15px,0);}100%{opacity:0.6;-moz-transform:rotate(-30deg) translate3d(-10px,-25px,0);}}@-o-keyframes heartmove {0%{opacity:0;-o-transform:rotate(-30deg) translate3d(-10px,-15px,0);}100%{opacity:0.6;-o-transform:rotate(-30deg) translate3d(-10px,-25px,0);}}@-ms-keyframes heartmove {0%{opacity:0;-ms-transform:rotate(-30deg) translate3d(-10px,-15px,0);}100%{opacity:0.6;-ms-transform:rotate(-30deg) translate3d(-10px,-25px,0);}}@keyframes heartmove {0%{opacity:0;transform:rotate(-30deg) translate3d(-10px,-15px,0);}100%{opacity:0.6;transform:rotate(-30deg) translate3d(-10px,-25px,0);}}