首次送书福利html+css+js制作动态千纸鹤
Posted 静Yu
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了首次送书福利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
以上是关于首次送书福利html+css+js制作动态千纸鹤的主要内容,如果未能解决你的问题,请参考以下文章
HTML+CSS+JS制作3D动态相册表白网站代码程序员专属情人节表白网站