转载

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

前言

很不巧前天突然就感冒了，都怪自己吃太多饼干导致上火了。整个人都无精打采。本来想多做几个兔斯基表情的，但身体发热很难受。所以就只完成一个简单点的表情耍一耍。

正文

先看一下这个简单到不能再简单的小表情吧：

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

这里我就直接分享代码吧：

html结构：

<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>

这个结构还是很简单的，毕竟兔斯基就是简单的线稿表情。主要还是人为的给它赋予动画，带入一种有特定情境的表情。

下面就给它设置css样式：

头部（包括眼睛和脸颊）：

.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);  } }