特效页面A-02 一群鸟飞行动画特效 css+js_banner条动画一堆鸟飞的-CSDN博客

本文链接：https://blog.csdn.net/qq_44382922/article/details/104280458

本文介绍了如何使用HTML、CSS和JavaScript创建一群鸟飞行动画特效。分别展示了HTML结构、CSS样式和JS代码实现细节，并给出了最终效果的展示。

摘要由CSDN通过智能技术生成

一群鸟飞行动画特效

话不多说

html 代码

<body>
		<canvas></canvas>
	</body>

css 代码

<style type="text/css">
			body {
				background-color: #000;
				width: 40%;
				height: 40%;
			}
		</style>

js 代码

<script>var Birds = function() {
	var me = this;
	var config = {
		number: 100
	};
	var width;
	var height;
	var canvas;
	var engine;
	var birds;
	var frame = 0;
	var speed = 0.4;
	var birdLineCount = 10;
	var birdLineIndex = -1;
	var bgTop;
	var bgBot;
	var z = {
		current: 1,
		target: 1
	};
	var mouse = {
		x: 0.5,
		y: 0.5,
		z: 0.5
	};
	var prepare = function() {
		canvas = document.getElementsByTagName('canvas')[0];
		engine = canvas.getContext('2d');
		width = window.innerWidth;
		height = window.innerHeight;
		canvas.setAttribute('width', width);
		canvas.setAttribute('height', height);
		bgTop = engine.createLinearGradient(0, 0, 0, height / 2);
		bgTop.addColorStop(0, '#000');
		bgTop.addColorStop(1, '#110');
		bgBot = engine.createLinearGradient(0, height / 2, 0, height);
		bgBot.addColorStop(0, '#000');
		bgBot.addColorStop(1, '#001');
	};
	var request = function() {
		window.requestAnimationFrame(tick);
	};
	var solveBirdMove = function(bird) {
		['x', 'y', 'z'].forEach(function(ke