纯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); } }
PS：因为兔斯基很多表情都基于同一个身体，通过不同动画来表现的，所以如果想做流泪的表情，只需要把动画部分换成流眼泪就行了，其他部分可以不做修改。就是这么简单！
若需转载，请注明出处，谢谢合作！
