js实现群鸟在天空中聚集飞翔动画效果代码-html代码-BFW代码库

js实现群鸟在天空中聚集飞翔动画效果代码

代码语言：html

所属分类：动画

代码描述：js实现群鸟在天空中聚集飞翔动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html>

<head>
    <style>
        body {
          width: 100%;
          min-height: 100%;
          margin: 0;
          overflow: hidden;
        }
        
        canvas {
          z-index: 99;
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          background: linear-gradient(#B7B0E3, #FFD3D6);
        }
        
        @-webkit-keyframes anim {
          from {
            transform: translateX(200%);
          }
          to {
            transform: translateX(-200%);
          }
        }
        
        @keyframes anim {
          from {
            transform: translateX(200%);
          }
          to {
            transform: translateX(-200%);
          }
        }
        @-webkit-keyframes anime {
          from {
            transform: translateX(0);
          }
          to {
            transform: translateX(-200%);
          }
        }
        @keyframes anime {
          from {
            transform: translateX(0);
          }
          to {
            transform: translateX(-200%);
          }
        }
        .c1, .c2 {
          width: 800px;
          height: 700px;
          position: absolute;
          background: transparent url("//repo.bfw.wiki/bfwrepo/image/5edc746d6bfd5.png") 0 0 no-repeat;
          background-size: 100%;
          z-index: 999;
        }
        
        .c1.one, .c2.one {
          top: -260px;
          left: 0px;
        }
        
        .c1.two, .c2.two {
          top: -200px;
          left: 100px;
        }
        
        .c1.three, .c2.three {
          top: -240px;
          right: 100px;
        }
        
        .c1.four, .c22.four {
          top: -180px;
          right: 0px;
        }
        
        .c2 .one {
          top: -209px;
        }
        
        @media (max-width: 1023px) {
          .c2.one {
            left: -80px;
          }
        
          .c2.two {
            left: -120px;
          }
        
          .c2.three {
            right: 220px;
          }
        
          .c2.four {
            right: 220px;
          }
        }
        .c1 {
          -webkit-animation: anime 1000s linear infinite forwards;
                  animation: anime 1000s linear infinite forwards;
        }
        
        .c2 {
          transform: translateX(200%);
          -webkit-animation: anim 1000s linear infinite forwards;
                  animation: anim 1000s linear infinite forwards;
        }
    </style>

</head>

<body><canvas id="canv" width="1047" height="646"></canvas>
    <div class="sky">
        <div class="clouds">
            <div class="c1 one"></div>
            <div class="c1 two"></div>
            <div class="c1 three"></div>
            <div class="c1 four"></div>
            <div class="c2 one"></div>
            <div class="c2 two"></div>
            <div class="c2 three"></div>
            <div class="c2 four"></div>
        </div>
    </div>
    <script>
        var Bird = {
          def: function(n, m, s) {
            if (m) this.e(n.prototype, m);
            if (s) this.e(n, s);
            return n;
          },
          e: function(o, p) {
            for (prop in p) o[prop] = p[prop];
            return o;
          },
          v: [
            [5, 0, 0],
            [-5, -2, 1],
            [-5, 0, 0],
            [-5, -2, -1],
            [0, 2, -6],
            [0, 2, 6],
            [2, 0, 0],
            [-3, 0, 0]
          ],
    .........完整代码请登录后点击上方下载按钮下载查看