知识问答
「SEO优化」鼠标特效 - 小星星拖尾跟随
2025-09-21 17:33:42
来源：互联网转载
喜欢鼠标特效的直接复制拿去用吧，相信您一定会喜欢的，本站就是采用这个特效的！
鼠标小星星拖尾跟随
代码
代码语言：javascript
<!DOCTYPEhtml><htmllang="en"><head></head><body><spanclass="js-cursor-container"></span><ｓｃｒｉｐｔ>(functionfairyDustCursor(){varpossibleColors=["#D61C59","#E7D84B","#1B8798"]varwidth=window.innerWidth;varheight=window.innerHeight;varcursor={x:width/2,y:width/2};varparticles=[];functioninit(){bindEvents();loop();}//BindeventsthatareneededfunctionbindEvents(){document.addEventListener('mousemove',onMouseMove);window.addEventListener('resize',onWindowResize);}functiononWindowResize(e){width=window.innerWidth;height=window.innerHeight;}functiononMouseMove(e){cursor.x=e.clientX;cursor.y=e.clientY;addParticle(cursor.x,cursor.y,possibleColors[Math.floor(Math.random()*possibleColors.length)]);}functionaddParticle(x,y,color){varparticle=newParticle();particle.init(x,y,color);particles.push(particle);}functionupdateParticles(){//Updatedfor(vari=0;i<particles.length;i++){particles[i].ｕｐｄａｔｅ();}//Removedeadparticlesfor(vari=particles.length-1;i>=0;i--){if(particles[i].lifeSpan<0){particles[i].die();particles.splice(i,1);}}}functionloop(){requestAnimationFrame(loop);updateParticles();}/***Particles*/functionParticle(){this.character="*";this.lifeSpan=120;//msthis.initialStyles={"position":"fixed","display":"inline-block","top":"0px","left":"0px","pointerEvents":"none","touch-action":"none","z-index":"10000000","fontSize":"25px","will-change":"transform"};//Init,andsetpropertiesthis.init=function(x,y,color){this.velocity={x:(Math.random()<0.5?-1:1)*(Math.random()/2),y:1};this.position={x:x+10,y:y+10};this.initialStyles.color=color;this.element=document.createElement('span');this.element.innerHTML=this.character;applyProperties(this.element,this.initialStyles);this.ｕｐｄａｔｅ();document.querySelector('.js-cursor-container').appendChild(this.element);};this.ｕｐｄａｔｅ=function(){this.position.x+=this.velocity.x;this.position.y+=this.velocity.y;this.lifeSpan--;this.element.style.transform="translate3d("+this.position.x+"px,"+this.position.y+"px,0)scale("+(this.lifeSpan/120)+")";}this.die=function(){this.element.parentNode.removeChild(this.element);}}/***Utils*///Appliescss`properties`toanelement.functionapplyProperties(target,properties){for(varkeyinproperties){target.style[key]=properties[key];}}if(!('ontouchstart'inwindow||navigator.msMaxTouchPoints))init();})();</ｓｃｒｉｐｔ></body></html> 总结：以上就是关于《「SEO优化」鼠标特效 - 小星星拖尾跟随》的全部内容，希望对大家有所帮助。想了解更多有网站优化、搜索引擎排名、网站建设、网页设计的相关内容，请收藏本站及时关注本站更新。
唱脸谱四年级下教案
