欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

纯CSS3实现兔斯基简单害羞表情_html/css_WEB-ITnose

程序员文章站 2024-01-19 17:48:10
...
看一下这个简单到不能再简单的小表情吧:

兔斯基害羞表情

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

html结构:

这个结构还是很简单的,毕竟兔斯基就是简单的线稿表情。主要还是人为的给它赋予动画,带入一种有特定情境的表情。

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