【首次送书福利】html+css+js制作动态千纸鹤
?作者主页：静Yu
?简介：CSDN全栈优质创作者、华为云享专家、前端知识交流社区创建者
?社区地址：https://bbs.csdn.net/forums/JingYu
?文末送书，获取源码
效果截图
实际上是动态效果
HTML代码
html部分代码比较简单，引入了一个<div>块，设置了CSS样式
<!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>
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;
}
js部分代码
index.js
function randColor(base = 0, amt=.2){
return [(base+random(amt)-amt/2)%1, .2 + random(amt), .8 + random(amt)];
}
function setup (){
pixelDensity(1);
createCanvas();
colorMode(HSB, 1, 1, 1);
windowResized();
}
function init(){
birds = [];
for (let i = 0; i < numBirds; i++) birds.push(new Bird());
birds = birds.sort((a,b) => a.size - b.size);
}
function draw(){
background(0, .5);
birds.map(b => b.render());
}
function mousePressed(){windowResized();}
function windowResized(){
resizeCanvas(windowWidth, windowHeight);
init();
}
送书福利
粉丝数终于达到9000了，感谢大家的支持，本次是博主首次送书，大家积极参与，以后福利多多。
抽奖具体规则如下：
（印象笔记，可以用浏览器打开）
https://app.yinxiang.com/fx/caad2b92-9f06-4729-8a98-d77f4f87bcd1
内容简介
Node.js 因为使用了 Google 的 V8 引擎，所以具有高性能、高并发的特点，尤其适合聊天等即时应用的处理。Node.js 使用 JavaScript 编程语言，所以对初学者极其友好，有利于快速入门学习。
本书分为 10 章，从逻辑上分为四个部分。第一部分为基础篇（第 1~7 章）。该部分介绍了 Node.js 及 JavaScript 语言的基础知识、Node.js 的文件管理模块、网络开发模块、访问 MongoDB数据库模块、分布式模块。第二部分Express.js 框架篇（第 8 章）。该部分介绍了 Node.js 的 Express.js 框架，包括框架的路由、中间件、模板引擎、错误处理、调试、静态文件等模块。第三部分为 Koa.js 框架篇（第 9 章）。该部分介绍了 Node.js 的 Koa.js 框架，框架的级联、设置、错误处理、上下文、中间件、路由等模块。第四部分为实践篇（第 10 章）。该部分介绍了前端 Vue.js 框架，并使用前端 Vue.js 框架和后端 Express.js 框架，数据库为 MongoDB 的前后端分离项目。该项目还具有基本的 MVC 三层架构。
本书适合有一定 Web 开发基础的 Node.js 初学者学习，同样也适合高等院校和培训机构相关专业的师生作为教学参考用书。
喜欢的小伙伴可以参与抽奖，有需要的小伙伴也可以自己购买
京东自营购买链接
https://item.jd.com/13504168.html
当当自营购买链接
http://product.dangdang.com/29323970.html
源码获取方式
微信搜索【知识小海洋】，回复千纸鹤
浏览器打开连接：
https://app.yinxiang.com/fx/caad2b92-9f06-4729-8a98-d77f4f87bcd1