css实现成群结队的鸟儿飞翔动画效果代码-html代码-BFW代码库

css实现成群结队的鸟儿飞翔动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现成群结队的鸟儿飞翔动画效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
* {
        padding: 0;
        margin: 0;
}

.sky {
        background-image: linear-gradient(135deg, #abdcff 10%, #0396ffc7 100%);
        height: 100vh;
        width: 100%;
        perspective: 200px;
        overflow: hidden;
}
</style>



</head>

<body>
  <div id="app" class="sky"></div>
  
  
      <script>


const app = document.querySelector("#app");

createBirds(0);

function createBirds(interval) {
        setTimeout(() => {
                const color = createRandomColor();
                app.append(createBird(color));
                createBirds(random(3));
        }, interval);
}

function createBird(color = "blue") {
        const x = random(3) - 200;
        const y = random(3) - 200;
        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
        const path = document.createElementNS("http://www.w3.org/2000/svg", "path");

        svg.style.position = "absolute";

        path.setAttribute("fill", color);
        path.setAttribute(
                "d",
                `
        M 120 0
        C 100 10     115 50   150 150
        C 185 50   200 0   180 0
  .........完整代码请登录后点击上方下载按钮下载查看