
代码
代码语言:javascript
<script>(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 =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.update();document.querySelector('.js-cursor-container').appendChild(this.element);};this.update=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();})();script>