canvas模拟水平面波纹波浪动画及模糊效果代码
代码语言:html
所属分类:动画
代码描述:canvas模拟水平面波纹波浪动画及模糊效果代码,上水位上浮超过文字高度时,文字就会模糊,当水平面下降后,文字又清晰了。
代码标签: canvas 模拟 水平面 波纹 波浪 动画 模糊
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @charset 'UTF-8'; @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap:400,100,500,300italic,500italic,700italic,900,300'); body { display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; flex-direction: column; font-family: 'Poppins'; margin: 0; padding: 0; } canvas { position: absolute; width: 100vw; height: 100vh; border: solid; background: rgba(193,216,240, 0.1); z-index: 3; } .blur { position: absolute; width: 100vw; height: 100vh; top: 0; backdrop-filter: blur(3px); z-index: 2; } section { display: flex; justify-content: center; align-items: center; flex-direction: column; z-index: 1; transform: scale(1.25); } section h1, section h2 { font-size: 2rem; color: rgba(0, 0, 0, 0.5); margin: 0.25rem; } section h1 { border-style: solid; border-width: 2mm; border-radius: 10mm; font-size: 2rem; padding: 2mm 8mm; } section h2 { font-size: 1rem; } </style> </head> <body> <canvas></canvas> <section> <h1>32teeth</h1> <h2>this pen needs ❤</h2> </section> <div class='blur'></div> <script> const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); const blur = document.querySelector('.blur'); const width = canvas.width = window.innerWidth; const height = canvas.height = window.innerHeight; const lava = { count: 100, springs: [], d: 0.005, t: 0.05, y: 0, dy: 0, hit: false, init: () => { lava.y = 300; for (let n = 0; n < lava.count; n++) { lava.springs.push({ x: width / lava.count * n, y: lava.y, w: width / lava.count * 2, p: 0, v: 0, step: 0, update: function (d, t) { this.v += -(t * this.p) - d * this.v; this.p += this.v; if (lava.y !== this.y && this.step < 20) { lava.y < this.y ? this.y -= lava.dy : this.y += lava.dy; this.step++; } if (this.step === 20) { this.y = lava.y; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0