💛作者主頁：靜Yu
🧡簡介：CSDN全堆疊優質創作者、華為云享專家、前端知識交流社區創建者
💛社區地址：https://bbs.csdn.net/forums/JingYu
🧡文末送書，獲取原始碼

千紙鶴

效果截圖
HTML代碼
CSS代碼
js部分代碼
送書福利
- - 抽獎具體規則如下：
  - 內容簡介
  - 原始碼獲取方式

效果截圖

實際上是動態效果
在這里插入圖片描述

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/382905.html

標籤：其他

上一篇：Web前端期末大作業--重工機械設備檢測生產企網頁設計（HTML+CSS+JavaSc

下一篇：Vue keep-alive 詳細介紹（動態組件、路由組件快取優化）

【首次送書福利】html+css+js制作動態千紙鶴

千紙鶴