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

最后编辑于：2017.11.27 05:54:40

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 194,088评论 5赞 459
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 81,715评论 2赞 371
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 141,361评论 0赞 319
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,099评论 1赞 263
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 60,987评论 4赞 355
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,063评论 1赞 272
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,486评论 3赞 381
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,175评论 0赞 253
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,440评论 1赞 290
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,518评论 2赞 309
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,305评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,190评论 3赞 312
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,550评论 3赞 298
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 28,880评论 0赞 17
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,152评论 1赞 250
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,451评论 2赞 341
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,637评论 2赞 335

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

推荐阅读更多精彩内容