我怎样才能让这个 Codepen 项目成为我网站的背景？

免责声明首先——不要试图去理解其中发生的一切。作为一个初学者，你应该真正努力向上，并在某个时候发明你自己的奇特项目。执行超文本标记语言<head>        <script defer src="https://raw.githack.com/strangerintheq/ShaderToy/master/ShaderToy.js"></script>    <script defer src="shader.js"></script>    </head>您基本上是在添加两个脚本。第一个来自网站，第二个您必须自己复制（即您可以在 Codepen JS 部分看到的那个）。JS// filename: "shader.js"// https://thelig.ht/chladni/let uf = {xy: '2f'};addEventListener('mousemove', e => uf.xy([e.x/innerWidth,e.y/innerHeight]))new ShaderToy(`void main(void) {const float PI = 3.14159265;vec2 p = (2.0 * gl_FragCoord.xy - resolution.xy) / resolution.y;vec4 s1 = vec4(1.0, 1.0, 1.0, 2.0);vec4 s2 = vec4(-4.0, 4.0, 4.0, 4.6);float tx = sin(time)*0.1; float ty = cos(time)*0.1; float a = mix(s1.x, s2.x, xy.x+tx);float b = mix(s1.y, s2.y, xy.x+tx);float n = mix(s1.z, s2.z, xy.y+ty);float m = mix(s1.w, s2.w, xy.y+ty);float max_amp = abs(a) + abs(b);float amp = a * sin(PI*n*p.x) * sin(PI*m*p.y) + b * sin(PI*m*p.x) * sin(PI*n*p.y);float col = 1.0 - smoothstep(abs(amp), 0.0, 0.1);gl_FragColor = vec4(vec3(col), 1.0);}`, {uniforms:uf}).fullscreen().loop();我没有费心去检查那里发生了什么。如果您有兴趣，也许您喜欢查找一些有关着色器的教程。CSScanvas {    z-index: -1;    position: fixed;    top: 0;}将其添加到外部样式表或头部部分。该脚本的工作原理是在页面上创建画布。此 CSS 将其移动到页面上每个元素的后面 ( z-index: -1)，使其不可移动 ( position: fixed) 并从窗口的最上边缘开始 ( top: 0)。

我怎样才能让这个 Codepen 项目成为我网站的背景？

1回答