兔斯基害羞表情
這里我就直接分享代碼吧：
html結(jié)構(gòu)：
這個(gè)結(jié)構(gòu)還是很簡(jiǎn)單的，畢竟兔斯基就是簡(jiǎn)單的線稿表情。主要還是人為的給它賦予動(dòng)畫(huà)，帶入一種有特定情境的表情。
下面就給它設(shè)置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：因?yàn)橥盟够芏啾砬槎蓟谕粋€(gè)身體，通過(guò)不同動(dòng)畫(huà)來(lái)表現(xiàn)的，所以如果想做流淚的表情，只需要把動(dòng)畫(huà)部分換成流眼淚就行了，其他部分可以不做修改。就是這么簡(jiǎn)單！
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 www.polareal.com 版權(quán)所有
違法及侵權(quán)請(qǐng)聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬(wàn)商天勤律師事務(wù)所王興未律師提供法律服務(wù)
