国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

純CSS3實現兔斯基簡單害羞表情_html/css

來源:懂視網 責編:小采 時間:2020-11-27 16:36:38
文檔

純CSS3實現兔斯基簡單害羞表情_html/css

純CSS3實現兔斯基簡單害羞表情_html/css_WEB-ITnose:看一下這個簡單到不能再簡單的小表情吧: 兔斯基害羞表情 這里我就直接分享代碼吧: html結構: 這個結構還是很簡單的,畢竟兔斯基就是簡單的線稿表情。主要還是人為的給它賦予動畫,帶入一種有特定情境的表情。 下面就給它設置css樣
推薦度:
導讀純CSS3實現兔斯基簡單害羞表情_html/css_WEB-ITnose:看一下這個簡單到不能再簡單的小表情吧: 兔斯基害羞表情 這里我就直接分享代碼吧: html結構: 這個結構還是很簡單的,畢竟兔斯基就是簡單的線稿表情。主要還是人為的給它賦予動畫,帶入一種有特定情境的表情。 下面就給它設置css樣

看一下這個簡單到不能再簡單的小表情吧:

兔斯基害羞表情

這里我就直接分享代碼吧:

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:因為兔斯基很多表情都基于同一個身體,通過不同動畫來表現的,所以如果想做流淚的表情,只需要把動畫部分換成流眼淚就行了,其他部分可以不做修改。就是這么簡單!

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

純CSS3實現兔斯基簡單害羞表情_html/css

純CSS3實現兔斯基簡單害羞表情_html/css_WEB-ITnose:看一下這個簡單到不能再簡單的小表情吧: 兔斯基害羞表情 這里我就直接分享代碼吧: html結構: 這個結構還是很簡單的,畢竟兔斯基就是簡單的線稿表情。主要還是人為的給它賦予動畫,帶入一種有特定情境的表情。 下面就給它設置css樣
推薦度:
標簽: 害羞 實現 兔斯基
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 香蕉乱码成人久久天堂爱免费 | a男人的天堂久久a毛片 | 国产一级高清免费观看 | 九九国产精品视频 | 福利二区 | 福利片一区二区 | 成人在线日韩 | 97久久精品午夜一区二区 | 亚洲欧美日韩高清一区二区三区 | 久久www免费人成_看片美女图 | 亚洲五月婷婷 | 欧美一区二区在线观看视频 | 一区二区精品视频 | 久久91精品久久91综合 | 欧美日韩精品一区二区三区视频在线 | 一级一级特黄女人精品毛片视频 | 中文字幕一区二区三区久久网站 | 亚洲综合色婷婷 | 成人免费一级毛片在线播放视频 | 久久一本日韩精品中文字幕屁孩 | 日韩午夜视频在线观看 | 欧美日韩国产综合在线 | 香港经典a毛片免费观看…伊人色综合久久 | 在线观看精品国产 | 亚洲精品在线免费观看视频 | 在线播放国产精品 | 国产全部视频 | 在线视频亚洲欧美 | 欧美视频日韩专区午夜 | 国产精品成人va | 97久久精品午夜一区二区 | 欧美成人福利 | 欧美 韩国 精品 另类 综合 | 国产成人久久精品激情91 | 日韩一区二区视频 | 久久国产成人精品国产成人亚洲 | 99久久精品国产一区二区小说 | 亚洲一区日韩一区欧美一区a | 一区二区三区免费在线观看 | 伊人久久国产 | 亚洲欧美中文日韩在线v日本 |