CSS3实现动画-飞翔的小鸟

来源：互联网发布：国家旅游局大数据编辑：程序博客网时间：2024/05/01 15:20
CSS3实现动画-飞翔的小鸟
以前的时候动画都是flash,flash存在着种种弊端，当c3动画出来后，就是这个问题有了新的解决方案，使一切变得简单可操作。
在这个例子中，动画中实现了鸟翅膀的煽动，以及云彩的移动，所以c3很强大，仅仅用了这点代码就能实现动态效果。直接上代码：
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>birdfly</title>    <style>        body {            margin: 0;            padding: 0;            background: #77B7ED;            overflow: hidden;        }        .cloud{            width:100px;            height:80px;            border-radius: 50%;            margin: 100px auto 0px;            background:#fff;            position: relative;            right:-780px;            border:0px solid gray;            box-shadow: 50px -30px 0 #fff,100px -45px 0 #fff,120px 0px 0 #fff,50px 0px 0 #fff;            animation: cloud 3s linear infinite;        }        .cloud:after{            content:"";            width:140px;            height:30px;            display:inline-block;            position: absolute;            border-radius: 10px;;            top: 50px;            left:20px;            background:#fff;            border:0px solid gray;            z-index:2;        }        #cloudp {               position: absolute;               top: 140px;               right: -80px;               animation: cloud1 5s linear infinite;           }        #cloudp2 {            position: absolute;            top: 340px;            left:0;            animation: cloud1 6s linear infinite;        }        .birdbody{            width:120px;            height:40px;            background: -webkit-linear-gradient(top,#ed4961 50%,#ed494a 50%);            /*background: -webkit-linear-gradient(right,red,blue,yellow);*/            margin: 150px auto;            position: relative;            border-radius: 10px;        }        @keyframes fly {            0%{                transform:rotateX(0deg)            }            50%{                transform:rotateX(180deg)            }            100%{                transform:rotateX(0deg)            }        }        @keyframes cloud {            0%{                left: 60%;            }            100%{                left: -60%;            }        }        @keyframes cloud1 {            0% {                left: 180%;            }            100% {                left: -160%;            }        }        .mouse:before{            content:"";            height:2px;            width:2px;            display:block;            background: #000;            position: absolute;            top:3px;            left:-5px;            border-radius: 2px;            z-index: 3;        }        .mouse{            height:0px;            width:0px;            border:8px solid #f9c438;            background: #fff;            position: absolute;            top:5px;            left:120px;            border-radius: 0px;            border-top:8px solid transparent;            /*border-bottom:10px solid transparent;*/            border-right:8px solid transparent;            background:#77B7ED;        }        .mouse:after{            content:"";            height:0px;            width:0px;            display:block;            border:4px solid #e5ae30;            background: #fff;            position: absolute;            top:10px;            left:-8px;            border-radius: 0px;            /*border-top:8px solid transparent;*/            border-bottom:8px solid transparent;            border-right:8px solid transparent;            background:#77B7ED;        }        .eye {            height: 15px;            width: 15px;            border-radius: 50%;            background: #fff;            border: 5px solid #701c2c;            position: relative;            top: 5px;            left: 90px;        }        .eye:before{            content:"";            display:block;            height:3px;            width:15px;            border-radius: 50%;            background:#701c2c;            /*border:3px solid #701c2c;*/            position: relative;            top:-9px;            left: 3px;        }        .eye:after{            content:"";            display:block;            height:5px;            width:5px;            border-radius:50%;            background:#000;            position: absolute;            top:4px;        }        .ulgy{                height:10px;                width:10px;                border-radius: 50%;                background:#f08ca6;                position: absolute;                top:10px;                left:10px;            }        .ulgy:before {            content: "";            display: block;            height: 5px;            width: 5px;            border-radius: 50%;            background: #f08ca6;            position: absolute;            top: 9px;            left: 15px;        }        .ulgy:after{            content: "";            display:block;            height:6px;            width:6px;            border-radius: 50%;            background:#f08ca6;            position: absolute;            top:13px;            left:5px;        }        .wing{            height:0px;            width:0px;            border:40px solid #b6323d;            position: absolute;            top:20px;            left:10px;            border-bottom:30px solid transparent;            border-right:30px solid transparent;            transform-origin: center top;            animation: fly 0.3s 0s infinite;            z-index:2;        }        .last{            height:0px;            width:0px;            border:35px solid #ec4a61;            position: absolute;            top:7px;            left:-30px;            border-radius: 10px;            border-bottom:15px solid transparent;            border-right:15px solid transparent;            border-top:15px solid transparent;        }    </style></head><body><div class="cloud"></div><div class="cloud" id="cloudp"></div><div class="cloud" id="cloudp2"></div><div class="birdbody">    <div class="mouse"></div>    <div class="eye"></div>    <div class="ulgy"></div>    <div class="wing"></div>    <div class="last"></div></div></body></html>
1 0