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

最新文章專題視頻專題問(wèn)答1問(wèn)答10問(wèn)答100問(wèn)答1000問(wèn)答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題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關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問(wèn)答文章1 問(wèn)答文章501 問(wèn)答文章1001 問(wèn)答文章1501 問(wèn)答文章2001 問(wèn)答文章2501 問(wèn)答文章3001 問(wèn)答文章3501 問(wèn)答文章4001 問(wèn)答文章4501 問(wèn)答文章5001 問(wèn)答文章5501 問(wèn)答文章6001 問(wèn)答文章6501 問(wèn)答文章7001 問(wèn)答文章7501 問(wèn)答文章8001 問(wèn)答文章8501 問(wèn)答文章9001 問(wèn)答文章9501
當(dāng)前位置: 首頁(yè) - 科技 - 知識(shí)百科 - 正文

如何利用css畫出一只小鳥(niǎo)(代碼)

來(lái)源:懂視網(wǎng) 責(zé)編:小采 時(shí)間:2020-11-27 18:47:52
文檔

如何利用css畫出一只小鳥(niǎo)(代碼)

如何利用css畫出一只小鳥(niǎo)(代碼):本篇文章給大家分享的內(nèi)容是關(guān)于利用css畫出一只小鳥(niǎo),內(nèi)容很詳細(xì),有需要的朋友可以參考一下,希望可以幫助到你們.也不難,一步步的寫出身體部位,再定位上去就好了。來(lái)一張效果圖,后面給兩個(gè)加了動(dòng)畫,稍微難看一點(diǎn),后期慢慢修改<!DOCTYPE html&
推薦度:
導(dǎo)讀如何利用css畫出一只小鳥(niǎo)(代碼):本篇文章給大家分享的內(nèi)容是關(guān)于利用css畫出一只小鳥(niǎo),內(nèi)容很詳細(xì),有需要的朋友可以參考一下,希望可以幫助到你們.也不難,一步步的寫出身體部位,再定位上去就好了。來(lái)一張效果圖,后面給兩個(gè)加了動(dòng)畫,稍微難看一點(diǎn),后期慢慢修改<!DOCTYPE html&
本篇文章給大家分享的內(nèi)容是關(guān)于利用css畫出一只小鳥(niǎo),內(nèi)容很詳細(xì),有需要的朋友可以參考一下,希望可以幫助到你們.

也不難,一步步的寫出身體部位,再定位上去就好了。來(lái)一張效果圖,后面給兩個(gè)加了動(dòng)畫,稍微難看一點(diǎn),后期慢慢修改

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<style type="text/css">
 body{
 font-size: 0;
 text-align: center;
 }
 .wrap{
 position: relative;
 width: 500px;
 margin: 0 auto;
 }
 .a{ 
 display: inline-block;
 margin-top: 30px;
 width: 250px;
 height: 240px;
 background-color:#f2b22e;
 border: 1px solid #f2b22e;
 border-radius: 60% 60% 70% 70%;
 }

 .b{ 
 display: inline-block;
 width: 0;
 height: 0;
 border-bottom:40px solid #f2b22e;
 border-right: 60px solid transparent; 
 border-left: 12px solid transparent; 
 transform: rotate(40deg);
 position: absolute;
 top: 26px;
 right: 115px;
 }
 .c{
 display: inline-block;
 width: 0;
 height: 0;
 border-top:60px solid #f2b22e;
 border-right: 60px solid transparent; 
 border-left: 12px solid transparent; 
 transform: rotate(140deg);
 position: absolute;
 top: 26px;
 left: 105px;
 }
 .d{
 width: 100px;
 height: 40px;
 border-radius: 50%;
 border:1px solid #f2b22e;
 background-color: #f2b22e;
 transform: rotate(0deg);
 position: absolute;
 top: 150px;
 right: 72px;
 animation: bird_right 0.5s linear infinite;
 }
 .e{
 width: 100px;
 height: 40px;
 border-radius: 50%;
 border:1px solid #f2b22e;
 background-color: #f2b22e;
 transform: rotate(0deg);
 position: absolute;
 top: 150px;
 left: 72px;
 animation: bird_left 0.5s linear infinite;
 }
 .f{
 width: 40px;
 height: 40px;
 border: 20px solid #fff;
 border-radius: 50%;
 background-color: #000;
 position: absolute;
 top: 80px;
 left: 155px;
 }
 .g{
 width: 40px;
 height: 40px;
 border: 20px solid #fff;
 border-radius: 50%;
 background-color: #000;
 position: absolute;
 top: 80px;
 right: 155px;
 }
 .h{
 width: 0;
 height: 0;
 border-top:20px solid #e27326;
 border-left:20px solid transparent;
 border-right:20px solid transparent;
 position: absolute;
 top: 147px;
 left: 230px;
 }
 .i{
 width: 160px;
 height: 100px;
 border:1px solid #f3cc74;
 background-color: #f3cc74;
 border-radius: 50%;
 position: absolute;
 bottom: 0px;
 left: 170px;
 }
 .j{
 width: 12px;
 border-bottom:20px solid #e27326;
 border-radius: 50%;
 position: absolute;
 }
 .j_{
 bottom: 14px;
 left: 163px;
 }
 .k{
 left: 155px;
 bottom: 18px;
 }
 .l{
 left: 170px;
 bottom: 10px;
 }
 .n{
 bottom: 10px;
 right: 163px;
 }
 .m{
 bottom: 18px;
 right: 155px;
 }
 .o{
 bottom: 5px;
 right: 170px;
 }
 @-webkit-keyframes bird_left{
 0% {transform:rotate(0deg)}
 10% {transform:rotate(-10deg)}
 20% {transform:rotate(-20deg)}
 40% {transform:rotate(-30deg)}
 60% {transform:rotate(-40deg)}
 80% {transform:rotate(-50deg)}
 100% {transform:rotate(-60deg)}
 }
 @-webkit-keyframes bird_right{
 0% {transform:rotate(0deg)}
 10% {transform:rotate(10deg)}
 20% {transform:rotate(20deg)}
 40% {transform:rotate(30deg)}
 60% {transform:rotate(40deg)}
 80% {transform:rotate(50deg)}
 100% {transform:rotate(60deg)}
 }

 @-moz-keyframes bird_right{
 0% {transform:rotate(0deg)}
 10% {transform:rotate(10deg)}
 20% {transform:rotate(20deg)}
 40% {transform:rotate(30deg)}
 60% {transform:rotate(40deg)}
 80% {transform:rotate(50deg)}
 100% {transform:rotate(60deg)}
 }
 @-moz-keyframes bird_left{
 0% {transform:rotate(0deg)}
 10% {transform:rotate(-10deg)}
 20% {transform:rotate(-20deg)}
 40% {transform:rotate(-30deg)}
 60% {transform:rotate(-40deg)}
 80% {transform:rotate(-50deg)}
 100% {transform:rotate(-60deg)}
 }

 @-o-keyframes bird_left{
 0% {transform:rotate(0deg)}
 10% {transform:rotate(-10deg)}
 20% {transform:rotate(-20deg)}
 40% {transform:rotate(-30deg)}
 60% {transform:rotate(-40deg)}
 80% {transform:rotate(-50deg)}
 100% {transform:rotate(-60deg)}
 }
 @-o-keyframes bird_right{
 0% {transform:rotate(0deg)}
 10% {transform:rotate(10deg)}
 20% {transform:rotate(20deg)}
 40% {transform:rotate(30deg)}
 60% {transform:rotate(40deg)}
 80% {transform:rotate(50deg)}
 100% {transform:rotate(60deg)}
 }
</style>
<body>
 <p class="wrap">
 <p class="a"></p>
 <p class="b"></p>
 <p class="c"></p>
 <p class="d"></p>
 <p class="e"></p>
 <p class="f"></p>
 <p class="g"></p>
 <p class="h"></p>
 <p class="i"></p>
 <p class="j j_"></p>
 <p class="j k"></p>
 <p class="j l"></p>
 <p class="j n"></p>
 <p class="j m"></p>
 <p class="j o"></p>
 </p>
</body> 
</html>

相關(guān)推薦:

如何用純CSS實(shí)現(xiàn)卡通鸚鵡的效果

如何使用純CSS實(shí)現(xiàn)一臺(tái)咖啡機(jī)的效果

聲明:本網(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

文檔

如何利用css畫出一只小鳥(niǎo)(代碼)

如何利用css畫出一只小鳥(niǎo)(代碼):本篇文章給大家分享的內(nèi)容是關(guān)于利用css畫出一只小鳥(niǎo),內(nèi)容很詳細(xì),有需要的朋友可以參考一下,希望可以幫助到你們.也不難,一步步的寫出身體部位,再定位上去就好了。來(lái)一張效果圖,后面給兩個(gè)加了動(dòng)畫,稍微難看一點(diǎn),后期慢慢修改<!DOCTYPE html&
推薦度:
  • 熱門焦點(diǎn)

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 久久精品亚洲欧美日韩久久 | 国产精品久久久久久久专区 | 日韩精品一区二区三区视频 | 亚洲欧美在线视频 | 另类国产精品一区二区 | 日韩亚洲欧美一区 | 国产一区二区精品 | 欧美一区二区三区免费高 | 国产一区在线视频 | 亚洲视频在线观看视频 | 成人在线日韩 | 午夜影院欧美 | 精品久久久久久综合日本 | 精品国产日韩一区三区 | 在线一区二区三区 | 久久er | 日韩区 | 亚洲免费网站观看视频 | 亚洲区中文字幕 | 精品久久综合一区二区 | 伊人伊成久久人综合网777 | 国产l精品国产亚洲区在线观看 | 久久久久久久久国产 | 亚州色图欧美色图 | 欧美激情在线播放一区二区三区 | 国产成人久久精品区一区二区 | 高清不卡一区 | 美女牲交视频一级毛片 | 亚洲视频一区二区 | 亚洲人一区 | 国产一区二区免费视频 | 欧美高清亚洲欧美一区h | 亚洲福利网站 | 欧美国产日韩另类 | 91欧美激情一区二区三区成人 | 欧美高清在线视频一区二区 | 欧美日韩在线国产 | 久久久精| 91麻豆精品国产91久久久久久 | 影音先锋中文字幕在线 | 一级毛片视频免费 |