纯CSS3实现兔斯基简单害羞表情
2016-01-19 本文已影响937人
JR93
看一下这个简单到不能再简单的小表情吧：
兔斯基害羞表情
这里我就直接分享代码吧：
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);
}
}
PS：因为兔斯基很多表情都基于同一个身体，通过不同动画来表现的，所以如果想做流泪的表情，只需要把动画部分换成流眼泪就行了，其他部分可以不做修改。就是这么简单！
