HTML5+CSS3绘制小鸟 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
            body{
                background-color: skyblue
            }
            .cloud{
                width: 200px;
                height: 200px;
                position: relative;
                margin-top: 50px;
                margin-left: 100%;
                animation: piao 5000ms linear infinite;
            }
            .cloud li{
                list-style: none;
                width: 50px;
                height: 50px;
                background: #fff;
                -webkit-border-radius: 25px;
                -moz-border-radius: 25px;
                border-radius: 25px;
                position: absolute;
                top: 0;
                left: 0;
            }
            .cloud li:first-child{
                top: 5px;
                left: -20px;
            }
            .cloud li:nth-child(2){
                top: 25px;
                left: -40px;
            }
            .cloud li:nth-child(3){
                top: 5px;
                left: 20px;
            }
            .cloud li:nth-child(4){
                top: 25px;
                left: 40px;
            }
            .cloud li:nth-child(5){
                top: 25px;
                left: 0;
            }
            .cloud li:nth-child(6){
                top: 25px;
                left: -15px;
            }
            .cloud li:nth-child(7){
                top: 25px;
                left: 15px;
            }
            .bird{
                width: 200px;
                height: 200px;
                margin: 0 auto;
                /*border: 1px solid #fff;*/
                position: relative;
            }
            .main{
                position: absolute;
                top: 50px;
                left: 50px;
                width: 100px;
                height: 100px;
                background: #fab;
                -webkit-border-radius: 20px;
                -moz-border-radius: 20px;
                border-radius: 20px;
            }
            .tail{
                position: absolute;
                top: 80px;
                left: 30px;
                border-top: 20px solid #fde;
                border-bottom: 20px solid transparent;
                border-right: 20px solid transparent;
                border-left: 20px solid transparent;
            }
            .eyes{
                position: absolute;
                top: 10px;
                right: 10px;
                width: 40px;
                height: 40px;
                background: #fff;
                border: 2px solid #000;
                -webkit-border-radius: 25px;
                -moz-border-radius: 25px;
                border-radius: 25px;
            }
            .eye{
                position: absolute;
                top: 5px;
                right: 2px;
                border: 5px solid #000;
                width: 10px;
                height: 10px;
                background: #fff;
                -webkit-border-radius: 15px;
                -moz-border-radius: 15px;
                border-radius: 15px;
            }
            .mouth{
                top: 70px;
                left: 150px;
                position: absolute;
                border-top: 20px solid transparent;
                border-bottom: 20px solid  transparent;
                border-left: 20px solid #fda;
                border-right: 20px solid  transparent;
            }
            .line{
                position: absolute;
                height: 1px;
                background: #ccc;
                width: 20px;
                top: 90px;
                left: 150px;
            }
            .swing{
                position: absolute;
                border-bottom: 20px solid transparent;
                border-top: 20px solid #fdd;
                border-left: 20px solid #fdd;
                border-right: 20px solid transparent;
                top:120px;
                left: 70px;    
                transform-origin: top;
                animation: swing 600ms linear infinite;
            }
            @keyframes swing{
                
                
                50%{
                    -webkit-transform: rotateX(180deg);
                    -moz-transform: rotateX(180deg);
                    -ms-transform: rotateX(180deg);
                    -o-transform: rotateX(180deg);
                    transform: rotateX(180deg);
                }
                
            }
            @keyframes piao{
                100%{
                    -webkit-transform: translateX(-1200%);
                    -moz-transform: translateX(-1200%);
                    -ms-transform: translateX(-1200%);
                    -o-transform: translateX(-1200%);
                    transform: translateX(-1200%);
                }
            }
        </style>
    </head>
    <body>
        <div class="cloud">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="bird">
            <div class="tail">
                
            </div>
            <div class="main">
                <div class="eyes">
                    <div class="eye"></div>
                </div>
            </div>
            <div class="swing">
                
            </div>
            <div class="mouth">
                
            </div>
            <p class="line"></p>
        </div>
    </body>
</html>

纯CSS3和HTML5

posted @ 2016-07-01 09:11  apestack  阅读(282)  评论(0)  编辑  收藏  举报