HTML+CSS+JS实现 ❤️彩色3D线条动画特效❤️

效果演示：

代码目录：

主要代码实现：

HTML代码 :

<!doctype html>
<html><head><meta charset="utf-8"><title>彩带特效</title></head><body><script id="fs" type="x-shader/x-fragment">precision mediump float; uniform float time; uniform vec2 mouse; uniform vec2 resolution; // window ratio float ratio = resolution.x / resolution.y; float PI = 3.1415926; float line(vec2 p, float pct, float i) { return smoothstep(pct - sin(time / i) *0.06, pct, p.y) - smoothstep(pct, pct + sin(time / i) * 0.06, p.y); } vec2 rotate2d(vec2 p, float angle) { p = mat2(cos(angle), -sin(angle), sin(angle), cos(angle)) * p; return p; } void main(void) { // center center vec2 p = vec2(gl_FragCoord.xy* 2.0 - resolution) / min(resolution.x, resolution.y); // left bottom //vec2 p = gl_FragCoord.xy / resolution.xy; float l = length(p); vec3 c = vec3(0.0); vec3 d = vec3(l, 1.0 - p.x, 1.0 - p.y); for (float i = 1.0; i<=3 6.0; i++) { p=rotate2d(p, i * 10.0); float s=t ime / i; float y=s in(p.x + s) * 0.4 * l; float pct=l ine(p, y, i); c +=p ct; } gl_FragColor=v ec4(c * d, 1.0); } </script><script id="vs" type="x-shader/x-vertex">attribute vec3 position; void main(void){ gl_Position = vec4(position, 1.0); }</script><script>// variable for globallet c, // canvascw, ch, // window sizemx, my, // mousegl, // contextuniLocation, // for shaderrun, // not usedeCheck, // not usedstartTime, time, tempTime; // times/*** Make canvas*/const createCanvas = () => {const b = document.getElementsByTagName('body')[0];const c = document.createElement('canvas');c.setAttribute('id', 'canvas');c.style.position = 'fixed';c.style.display = 'block';c.style.zIndex = '-1';c.style.top = '0';c.style.left = '0';c.style.width = '100%';c.style.height = '100%';c.style.background = 'black';b.appendChild(c);};/*** Check event* @params {Object} e - check event*/const checkChange = e => {run = e.currentTarget.checked;if (run) {startTime = new Date().getTime();render();} else {tempTime += time;}};/*** Mouse event* @params {Object} e - mouse event*/const mouseMove = e => {mx = e.clientX / cw;my = e.clientY / ch;};/*** Resize window*/const resizeWindow = () => {cw = c.width = window.innerWidth;ch = c.height = window.innerHeight;init();};/*** Rendering function*/const render = () => {// run?if (!run) return;// timetime = (new Date().getTime() - startTime) * 0.001;// clear colorgl.clear(gl.COLOR_BUFFER_BIT);// uniformsgl.uniform1f(uniLocation[0], time);gl.uniform2fv(uniLocation[1], [mx, my]);gl.uniform2fv(uniLocation[2], [cw, ch]);// drawgl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);gl.flush();// recurrequestAnimationFrame(render);};/*** Create shader* @params {String} id - element id* @return {Object} shader - shader object*/const create_shader = id => {let shader;// get reference tagconst scriptElement = document.getElementById(id);// if not exsist returnif (!scriptElement) return;// check script attributeswitch (scriptElement.type) {// vertex shadercase 'x-shader/x-vertex':shader = gl.createShader(gl.VERTEX_SHADER);break;// fragment shadercase 'x-shader/x-fragment':shader = gl.createShader(gl.FRAGMENT_SHADER);break;default:return;}// assign source to shadergl.shaderSource(shader, scriptElement.text);// compile shadergl.compileShader(shader);// check shader was compiled?if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {return shader;} else {console.log(gl.getShaderInfoLog(shader));}};/*** Create program object and link shader function* @param {String} vs - element name* @param {String} fs - element name* @return {object} program - return program object*/const create_program = (vs, fs) => {let program;// create program objectprogram = gl.createProgram();// attach shader program objectgl.attachShader(program, vs);gl.attachShader(program, fs);// link shadergl.linkProgram(program);// check shader linkif (gl.getProgramParameter(program, gl.LINK_STATUS)) {// if success enable programgl.useProgram(program);return program;} else {return null;}};/*** Create vbo function* @param {Array} - Array in position* @return {Object} - vertex buffer object */const create_vbo = data => {//create buffer objectconst vbo = gl.createBuffer();// bind buffergl.bindBuffer(gl.ARRAY_BUFFER, vbo);// set data to buffergl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);// invalidata buffergl.bindBuffer(gl.ARRAY_BUFFER, null);return vbo;};/*** Create index buffer object function* @param {Array} data - Array in index* @return {Object} ibo - index buffer object*/const create_ibo = data => {// create buffer objectconst ibo = gl.createBuffer();// bind buffergl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo);// set data to buffergl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Int16Array(data), gl.STATIC_DRAW);// invalidate buffergl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);return ibo;};/*** Init canvas*/const init = () => {time = 0.0;tempTime = 0.0;uniLocation = new Array();// get elementc = document.getElementById('canvas');//eCheck = document.getElementById('check');// canvas sizecw = c.width = window.innerWidth;ch = c.height = window.innerHeight;// get webgl contextgl = c.getContext('webgl') || c.getContext('experimental-webgl');// set viewportgl.viewport(0, 0, cw, ch);// init shaderconst prg = create_program(create_shader('vs'), create_shader('fs'));run = prg != null;if (!run) {eCheck.checked = false;}uniLocation[0] = gl.getUniformLocation(prg, 'time');uniLocation[1] = gl.getUniformLocation(prg, 'mouse');uniLocation[2] = gl.getUniformLocation(prg, 'resolution');// init vertexconst position = [-1.0, 1.0, 0.0,1.0, 1.0, 0.0, -1.0, -1.0, 0.0,1.0, -1.0, 0.0];const index = [0, 2, 1,1, 2, 3];const vPosition = create_vbo(position);const vIndex = create_ibo(index);const vAttLocation = gl.getAttribLocation(prg, 'position');gl.bindBuffer(gl.ARRAY_BUFFER, vPosition);gl.enableVertexAttribArray(vAttLocation);gl.vertexAttribPointer(vAttLocation, 3, gl.FLOAT, false, 0, 0);gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, vIndex);// etc initgl.clearColor(0.0, 0.0, 0.0, 1.0);mx = 0.5;my = 0.5;startTime = new Date().getTime();};window.addEventListener('load', () => {createCanvas();init();render();// eventc.addEventListener('mousemove', mouseMove, false);//eCheck.addEventListener('change', checkChange, false);window.addEventListener('resize', resizeWindow, false);}, false);</script></body></html>