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.........完整代码请登录后点击上方下载按钮下载查看