鼠标跟随粒子发散效果
代码语言:html
所属分类:粒子
代码描述:鼠标跟随粒子发散效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { display: grid; -webkit-box-pack: center; justify-content: center; align-content: center; height: 100vh; font: 5vh Lora; } a { color: #222a; -webkit-text-decoration: #2224 wavy underline; text-decoration: #2224 wavy underline; -webkit-transition: all 0.3s; transition: all 0.3s; } a:hover { color: #2223; text-shadow: 0 0 100px #333; } canvas { position: fixed; z-index: -1; } </style> </head> <body translate="no"> <a href="" >hello</a> <script> console.clear(); const canvas = document.createElement('canvas'); document.body.append(canvas); canvas.style.display = 'block'; canvas.style.width = '100vw'; canvas.style.height = '100vh'; canvas.width = canvas.offsetWidth; canvas.height = canvas.offsetHeight; const gl = canvas.getContext('webgl2'); if (!gl) { alert('require webgl 2.0, bye') } const vss = `#version 300 es in vec2 p; void main() { gl_Position = vec4(p, 0.0, 1.0); } `; const fss = `#version 300 es precision mediump float; out vec4 o; uniform vec4 c; void main() { o = c; } `; // Create shader program // # should query both shader logs and program logs // # only if program link's status is false. // // Here's the antipattern .. keep for ref // const vs = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vs, vss); gl.compileShader(vs); if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS)) { console.error(gl.getShaderInfoLog(vs)); throw 1; } const fs = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fs, fss); gl.compileShader(fs); if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS)) { console.error(gl.getShaderInfoLog(fs)); throw 2; } const prg = gl.createProgram(); gl.attachShader(prg, vs); gl.attachShader(prg, fs); gl.linkProgram(prg); if (!gl.getProgramParameter(prg, gl.LINK_STATUS)) { console.error(gl.getProgramInfoLog(prg)); throw 3; } gl.detachShader(prg, vs); gl.deleteShader.........完整代码请登录后点击上方下载按钮下载查看
网友评论0