div+css实现小鸟天空中飞翔动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：div+css实现小鸟天空中飞翔动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" class="sky">

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.sky {
        height:100%;
        width:100%;
        background:linear-gradient(to bottom,#ADD8E6 0,#B5E0EF 100%);
        overflow:hidden
}
.bird,.bird *,.cloud {
        position:absolute
}
.bird:after,.bird:before,.bird *:after,.bird *:before,.cloud:after,.cloud:before {
        display:block;
        content:"";
        position:absolute
}
.bird {
        position:absolute;
        top:40%;
        left:50%;
        z-index:5;
        -webkit-animation:bird-movement-xy 20s linear infinite alternate both,bird-movement-z 50s linear infinite alternate both;
        animation:bird-movement-xy 20s linear infinite alternate both,bird-movement-z 50s linear infinite alternate both
}
.b-body {
        top:0;
        right:0;
        border-top:55px solid transparent;
        border-bottom:25px solid transparent;
        border-left:30px solid #5A5A5A;
        transform:rotate(-90deg)
}
.b-body:after {
        top:-55px;
        right:30px;
        border-top:55px solid transparent;
        border-bottom:25px solid transparent;
        border-left:25px solid #75BF75;
        transform:rotate(180deg)
}
.b-wings:before {
        top:54px;
        right:-51px;
        border-top:20px solid transparent;
        border-bottom:20px solid transparent;
        border-left:50px solid #5A5A5A;
        transform:rotateZ(90deg) rotateY(90deg);
        -webkit-animation:wing-movement-top .8s infinite linear both;
        animation:wing-movement-top .8s infinite linear both;
        transform-origin:0 0
}
.b-wings:after {
        top:56px;
        right:-11px;
        border-top:20px solid transparent;
        border-bottom:20px solid transparent;
        border-left:50px solid #A9A9A9;
        transform:rotateZ(-90deg) rotateY(90deg);
        -webkit-animation:wing-movement-bottom .8s infinite linear both;
        animation:wing-movement-bottom .8s infinite linear both;
        transform-origin:0 0
}
.b-details {
        top:39px;
        right:-13px;
        border-top:0 solid transparent;
        border-bottom:5px solid transparent;
        border-left:5px solid #FFFF43;
        transform:rotate(50deg)
}
.b-details:after {
        top:8px;
        right:3px;
        width:5px;
        height:5px;
        border-radius:50%;
        background-color:#2D2D2D
}
.b-beak {
        top:43px;
        right:-26px;
        border-top:0 solid transparent;
        border-bottom:11px solid transparent;
        border-left:13px solid gray;
        transform:rotate(-90deg)
}
.b-beak:after {
        top:3px;
        right:10px;
        border-top:0 solid transparent;
        border-bottom:5px solid transparent;
        border-left:11px solid #A9A9A9;
        transform:rotate(90deg)
}
.b-back {
        top:39px;
        right:55px;
        border-top:39px solid transparent;
        border-bottom:15px solid transparent;
        border-left:10px solid #5A5A5A;
        transform:rotate(-130deg)
}
.b-back:after {
        top:-43px;
        right:10px;
        border-top:43px solid transparent;
        border-bottom:11px solid transparent;
        border-left:9px solid #75BF75;
        transform:scale(-1,1)
}
.cloud {
        width:35px;
        height:11px;
        background-color:#fff;
        border-radius:100px;
        box-shadow:0 1px 5px 0 rgba(50,50,50,0.05);
        opacity:1
}
.cloud:after,.cloud:before {
        background-color:#fff
}
.cloud:after {
        width:10px;
        height:10px;
        border-radius:50%;
        top:-54%;
        left:14%;
        transform:rotate(-25deg)
}
.cloud:before {
        width:20px;
        height:20px;
        border-radius:50%;
        top:-90%;
        right:10%
}
.cloud:nth-child(1) {
        top:11%;
        left:178%;
        transform:scale(1);
        -webkit-animation:cloud-movement-1 27s -23s infinite linear;
        animation:cloud-movement-1 27s -23s infinite linear;
        opacity:.92;
        z-index:2
}
@-webkit-keyframes cloud-movement-1 {
        99.999% {
        opacity:.92;
        left:-10%
}
100% {
        opacity:0
}
}@keyframes cloud-movement-1 {
        99.999% {
        opacity:.92;
        left:-10%
}
100% {
        opacity:0
}
}.cloud:nth-child(2) {
        top:52%;
        left:121%;
        transform:scale(5);
        -webkit-animation:cloud-movement-2 24s -26s infinite linear;
        animation:cloud-movement-2 24s -26s infinite linear;
        opacity:.92;
        z-index:6
}
@-webkit-keyframes cloud-movement-2 {
        99.999% {
        opacity:.92;
        left:-10%
}
100% {
        opacity:0
}
}@keyframes cloud-movement-2 {
        99.999% {
        opacity:.92;
        left:-10%
}
100% {
        opacity:0
}
}.cloud:nth-child(3) {
        top:44%;
        left:139%;
        transform:scale(5);
        -webkit-animation:cloud-movement-3 12s -38s infinite linear;
        animation:cloud-movement-3 12s -38s infinite linear;
        opacity:.92;
        z-index:6
}
@-webkit-keyframes cloud-movement-3 {
        99.999% {
        opacity:.92;
        left:-10%
}
100% {
        opacity:0
}
}@keyframes cloud-movement-3 {
        99.999% {
        opacity:.92;
        left:-10%
}
100% {
        opacity:0
}
}.cloud:nth-child(4) {
        top:47%;
        left:193%;
        transform:scale(5);
        -webkit-animation:cloud-movement-4 49s -1s infinite linear;
        animation:cloud-movement-4 49s -1s infinite linear;
        opacity:.92;
        z-index:6
}
@-webkit-keyframes cloud-movement-4 {
        99.999% {
        opacity:.92;
        left:-10%
}
100% {
        opacity:0
}
}@keyframes cloud-movement-4 {
        99.999% {
        opacity:.92;
        left:-10%
}
100% {
        opacity:0
}
}.cloud:nth-child(5) {
        top:61%;
        left:103%;
        transform:scale(7);
        -webkit-animation:cloud-movement-5 45s -5s infinite linear;
        animation:cloud-movement-5 45s -5s infinite linear;
        opacity:.92;
        z-index:8
}
@-webkit-keyframes cloud-movement-5 {
        99.999% {
        opacity:.92;
        left:-10%
}
100% {
        opacity:0
}
}@keyframes cloud-movement-5 {
        99.999% {
        opacity:.92;
        left:-10%
}
100% {
        opacity:0
}
}.cloud:nth-child(6) {
        top:27%;
        left:105%;
        transform:scale(3);
        -webkit-animation:cloud-movement-6 49s -1s infinite linear;
        animation:cloud-movement-6 49s -1s infinite linear;
        opacity:.92;
        z-index:4
}
@-webkit-keyframes cloud-movement-6 {
        99.999% {
        opacity:.92;
        left:-10%
}
100% {
        opacity:0
}
}@keyframes cloud-movement-6 {
        99.999% {
        opacity:.92;
        left:-10%
}
100% {
        opacity:0
}
}.cloud:nth-child(7) {
        top:60%;
        left:116%;
        transform:scale(6);
        -webkit-animation:cloud-movement-7 29s -21s infinite linear;
        animation:cloud-movement-7 29s -21s infinite linear;
        opacity:.92;
        z-index:7
}
@-webkit-keyframes cloud-movement-7 {
        99.999% {
        opacity:.92;
        left:-10%
}
100% {
        opacity:0
}
}@keyframes cloud-movement-7 {
        99.999% {
        opacity:.92;
        left:-10%
}
100% {
        opacity:0
}
}.cloud:nth-child(8) {
        top:23%;
        left:103%;
        transform:scale(7);
        -webkit-animation:cloud-movement-8 26s -24s infinite linear;
.........完整代码请登录后点击上方下载按钮下载查看