码迷，mamicode.com
首页 > Web开发 > 详细

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

时间：2015-09-12 10:51:32      阅读：423      评论：0      收藏：0      [点我收藏+]

标签：

前言

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

正文

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

技术分享

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

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

 

若需转载，请注明出处，谢谢合作！

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

标签：

原文地址：http://www.cnblogs.com/jr1993/p/4802618.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！