首页 >> 全栈工程 >>CSS >> 纯CSS3如何实现兔斯基动态害羞表情?(代码介绍)
详细内容

纯CSS3如何实现兔斯基动态害羞表情?(代码介绍)

时间:2020-11-13        阅读

本篇文章给大家通过代码示例介绍一下纯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);
    }
}

效果图:

t

PS:因为兔斯基很多表情都基于同一个身体,通过不同动画来表现的,所以如果想做流泪的表情,只需要把动画部分换成流眼泪就行了,其他部分可以不做修改。就是这么简单!

本文转载自:https://www.cnblogs.com/jr1993/p/4802618.html

更多web前端开发知识,请查阅ots网络安全门户 !!!


最新评论
请先登录才能进行回复登录
.
更多

1589982338979126.png


ots网络社区

www.ots-sec.cn

联系方式
更多

投稿邮箱:1481840992@qq.com

交流群2群:622534175

ots网络社区3群:1078548359

关注我们
更多
技术支持: 建站ABC | 管理登录