Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
html, body { overflow: hidden; margin: 0; padding: 0; width: 100%; height: 100%; background:#000; } canvas { position: absolute; width: 100%; height: 100%; background:#000; }
JavaScript
"use strict"; { const perlin = { init() { this.p = new Uint8Array(512); const p = new Uint8Array(256); for (let i = 0; i < 256; i++) p[i] = i; for (let i = 255; i > 0; i--) { const n = Math.floor((i + 1) * Math.random()); [p[i], p[n]] = [p[n], p[i]]; } for (let i = 0; i < 512; i++) this.p[i] = p[i & 255]; }, fade(t) { return t * t * t * (t * (t * 6 - 15) + 10); }, lerp(t, a, b) { return a + t * (b - a); }, grad(hash, x, y, z) { const h = hash & 15; const u = h < 8 ? x : y; const v = h < 4 ? y : h == 12 || h == 14 ? x : z; return ((h & 1) == 0 ? u : -u) + ((h & 2) == 0 ? v : -v); }, noise(xi, yi, zi) { const X = Math.floor(xi) & 255; const Y = Math.floor(yi) & 255; const Z = Math.floor(zi) & 255; const x = xi - Math.floor(xi); const y = yi - Math.floor(yi); const z = zi - Math.floor(zi); const u = this.fade(x); const v = this.fade(y); const w = this.fade(z); const A = this.p[X] + Y; const AA = this.p[A] + Z; const AB = this.p[A + 1] + Z; const B = this.p[X + 1] + Y; const BA = this.p[B] + Z; const BB = this.p[B + 1] + Z; return this.lerp( w, this.lerp( v, this.lerp(u, this.grad(this.p[AA], x, y, z), this.grad(this.p[BA], x - 1, y, z)), this.lerp(u, this.grad(this.p[AB], x, y - 1, z), this.grad(this.p[BB], x - 1, y - 1, z)) ), this.lerp( v, this.lerp(u, this.grad(this.p[AA + 1], x, y, z - 1), this.grad(this.p[BA + 1], x - 1, y, z - 1)), this.lerp( u, this.grad(this.p[AB + 1], x, y - 1, z - 1), this.grad(this.p[BB + 1], x - 1, y - 1, z - 1) ) ) ); } }; const canvas = webGL.init({ alpha: false, stencil: false, antialias: false, depth: false, }); canvas.blend(canvas.gl.ONE, canvas.gl.ONE); perlin.init(); canvas.createBufferLine(100); let z = 0; function run() { const sw = canvas.width / 100; const sh = sw * 30; for (let i = 0; i < 180; i++) { canvas.beginPath(); canvas.strokeStyle( z + i / 360, 0.5, 0.3 ); for (let j = -50; j < 50; j++) { const h = perlin.noise(j * 0.05, z - i * 0.01, z); canvas.lineTo( canvas.width * 0.5 + 0.01 * (i + 180) * j * sw * 0.5, -90 + i + canvas.height * 0.5 + h * sh ); } canvas.stroke(); } z += 0.0025; requestAnimationFrame(run); } run(); }
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>波浪的方式-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号