如何利用css畫出一隻小鳥(代碼)

最後更新：2018-07-26 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本篇文章給大家分享的內容是關於利用css畫出一隻小鳥,內容很詳細,有需要的朋友可以參考一下,希望可以協助到你們.

也不難，一步步的寫出身體部位，再定位上去就好了。來一張，後面給兩個加了動畫，稍微難看一點，後期慢慢修改

<!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>

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More