五、HTML5 千纸鹤动画特效

最新推荐文章于 2023-02-14 10:20:05 发布

&小小白&

最新推荐文章于 2023-02-14 10:20:05 发布

阅读量5.6k

点赞数 18

分类专栏： HTML特效文章标签： js html css css3 html5

本文链接：https://blog.csdn.net/qq_52916408/article/details/115219376

版权

文章目录

五、HTML5 千纸鹤动画特效

五、HTML5 千纸鹤动画特效

5.1 图片预览

在这里插入图片描述

5.2 index.html代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>HTML5 Canvas千纸鹤动画特效</title>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<div id="controls"></div>
		<script src='js/p5.min.js'></script>
		<script src="js/index.js"></script>
	</body>
</html>

5.3 style.css代码

* {
   
	margin: 0;
	padding: 0;
}

html,
body {
   
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: black;
}

canvas {
   
	display: block;
}

#controls {
   
	z-index: 2;
	margin: 20px;
	position: absolute;
	top: 0;
	left: 0;
	color: white;
}

5.4 index.js代码

birds = [];
let numBirds = 50;

class Bird {
   
	constructor() {
   
		this.pos = [random(width), random(height)];
		this.size = pow(random(), 2) * 80 + 40;
		this.angle = random(PI / 16