初始版本

public/js/input.min.js

@@ -0,0 +1,4 @@
+// 输入框特效
+	const getCaretCoordinates=(()=>{const properties=["direction","boxSizing","width","height","overflowX","overflowY","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderStyle","paddingTop","paddingRight","paddingBottom","paddingLeft","fontStyle","fontVariant","fontWeight","fontStretch","fontSize","fontSizeAdjust","lineHeight","fontFamily","textAlign","textTransform","textIndent","textDecoration","letterSpacing","wordSpacing","tabSize","MozTabSize"];const isFirefox=window.mozInnerScreenX!=null;return function(element,position,options){const debug=options?.debug||false;if(debug){const mirrorDiv=document.querySelector("#input-textarea-caret-position-mirror-div");mirrorDiv?.parentNode?.removeChild(mirrorDiv)}const div=document.createElement("div");div.id="input-textarea-caret-position-mirror-div";document.body.appendChild(div);const style=div.style;const computed=getComputedStyle(element);style.whiteSpace="pre-wrap";if(element.nodeName!=="INPUT")style.wordWrap="break-word";style.position="absolute";if(!debug)style.visibility="hidden";properties.forEach(prop=>style[prop]=computed[prop]);if(isFirefox&&element.scrollHeight>parseInt(computed.height)){style.overflowY="scroll"}else{style.overflow="hidden"}div.textContent=element.value.substring(0,position);if(element.nodeName==="INPUT"){div.textContent=div.textContent.replace(/\s/g,"\u00a0")}const span=document.createElement("span");span.textContent=element.value.substring(position)||".";div.appendChild(span);const coordinates={top:span.offsetTop+parseInt(computed.borderTopWidth),left:span.offsetLeft+parseInt(computed.borderLeftWidth)};if(!debug)document.body.removeChild(div);return coordinates}})();
+	//粒子系统核心逻辑
+	const POWERMODE=(()=>{const canvas=document.createElement("canvas");const context=canvas.getContext("2d");let particles=new Array(500);let pointer=0;canvas.width=window.innerWidth;canvas.height=window.innerHeight;canvas.style.cssText="position:fixed;top:0;left:0;pointer-events:none;z-index:999999;will-change:contents";document.body.appendChild(canvas);let resizeTimeout;window.addEventListener("resize",()=>{clearTimeout(resizeTimeout);resizeTimeout=setTimeout(()=>{canvas.width=window.innerWidth;canvas.height=window.innerHeight},200)});const randomBetween=(min,max)=>Math.random()*(max-min)+min;const colorCache=new WeakMap();const getColor=element=>{if(!POWERMODE.colorful){if(!colorCache.has(element)){colorCache.set(element,getComputedStyle(element).color)}return colorCache.get(element)}const hue=Math.random()*360;return`hsla(${hue},100%,65%,1)`};const getCaret=()=>{const active=document.activeElement;if(!active)return{x:0,y:0,color:"transparent"};if(active.tagName==="TEXTAREA"||active.tagName==="INPUT"){const rect=active.getBoundingClientRect();const coords=getCaretCoordinates(active,active.selectionStart);return{x:coords.left+rect.left,y:coords.top+rect.top,color:getColor(active)}}const selection=window.getSelection();if(selection.rangeCount){const range=selection.getRangeAt(0);const rect=range.getBoundingClientRect();return{x:rect.left,y:rect.top,color:getColor(range.startContainer.nodeType===3?range.startContainer.parentNode:range.startContainer)}}return{x:0,y:0,color:"transparent"}};const createParticle=(x,y,color)=>({x:x+(Math.random()-0.5)*10,y:y+(Math.random()-0.5)*5,alpha:1,color:color,velocity:{x:(Math.random()-0.5)*3,y:-3.5+Math.random()*2}});const render=()=>{requestAnimationFrame(render);context.clearRect(0,0,canvas.width,canvas.height);particles.forEach((particle,index)=>{if(!particle||particle.alpha<=0.1)return;particle.velocity.y+=0.1;particle.x+=particle.velocity.x;particle.y+=particle.velocity.y;particle.alpha*=0.96;context.globalAlpha=particle.alpha;context.fillStyle=particle.color;context.fillRect(Math.round(particle.x-1.5),Math.round(particle.y-1.5),3,3);if(particle.alpha<=0.1)particles[index]=null})};requestAnimationFrame(render);return Object.assign(()=>{const caret=getCaret();let numParticles=5+Math.round(randomBetween(0,10));while(numParticles--){particles[pointer]=createParticle(caret.x,caret.y,caret.color);pointer=(pointer+1)%500}},{colorful:true})})();