純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：由於兔斯基不少表情都基於同一個身體，經過不一樣動畫來表現的，因此若是想作流淚的表情，只須要把動畫部分換成流眼淚就好了，其餘部分能夠不作修改。就是這麼簡單！

 

若需轉載，請註明出處，謝謝合做！