首次送书福利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制作旋转爱心

[评论送书]html+css+js制作旋转爱心

2021最大的一次送书活动,免费包邮到家30本书。

HTML+CSS+JS制作3D动态相册表白网站代码程序员专属情人节表白网站

[送书] Java 线程池 ThreadPoolExecutor 相关题目解析

送书三月份的福利来了。