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

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

兔斯基害羞表情

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

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

本文原创发布php中文网，转载请注明出处，感谢您的尊重！