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
        C 200 0     150 90   150 100
        C 150 90   100 10    120 0
        Z
    `
	);

	path.innerHTML = `
        <animate 
            attributeType="CSS"
            attributeName="d" 
            values="
                M 120 0
                C 100 10     115 50   150 150
                C 185 50   200 0   180 0
                C 200 0     150 90   150 100
                C 150 90   100 10    120 0
                Z;

                M 75 0
                C 90 10     140 100   150 150
                C 160 100   210 10   225 0
                C 210 0     150 90   150 100
        .........完整代码请登录后点击上方下载按钮下载查看