本站鼠标滑动效果（仙尘光标）

本站鼠标滑动效果（仙尘光标）大家可能比较感兴趣，我也是无意中从其他地方看到，摘取过来的。2019年4月愚人节的时候看到大名鼎鼎的stackoverflow网站上有这个效果，简单查了下发现代码还蛮好找的就截取过来了，如下代码欢迎大家使用，放在body闭合标签的上面即可。

在本站工具菜单下面可以看到这个效果。

html标签：

<span class="js-cursor-container"></span>

js代码：

(function fairyDustCursor() {

    var possibleColors = ["#D61C59", "#E7D84B", "#1B8798"]
    var width = window.innerWidth;
    var height = window.innerHeight;
    var cursor = {x: width/2, y: width/2};
    var particles = [];

    function init() {
      bindEvents();
      loop();
    }

    // Bind events that are needed
    function bindEvents() {
        document.addEventListener('mousemove', onMouseMove);
        window.addEventListener('resize', onWindowResize);
    }

    function onWindowResize(e) {
      width = window.innerWidth;
      height = window.innerHeight;
    }

    function onMouseMove(e) {
      cursor.x = e.clientX;
      cursor.y = e.clientY;

      addParticle( cursor.x, cursor.y, possibleColors[Math.floor(Math.random()*possibleColors.length)]);
    }

    function addParticle(x, y, color) {
      var particle = new Particle();
      particle.init(x, y, color);
      particles.push(particle);
    }

    function updateParticles() {

      // Updated
      for( var i = 0; i < particles.length; i++ ) {
        particles[i].update();
      }

      // Remove dead particles
      for( var i = particles.length -1; i >= 0; i-- ) {
        if( particles[i].lifeSpan < 0 ) {
          particles[i].die();
          particles.splice(i, 1);
        }
      }

    }

    function loop() {
      requestAnimationFrame(loop);
      updateParticles();
    }

    /**
     * Particles
     */

    function Particle() {

      this.character = "*";
      this.lifeSpan = 120; //ms
      this.initialStyles ={
        "position": "fixed",
        "display": "inline-block",
        "top": "0px",
        "left": "0px",
        "pointerEvents": "none",
        "touch-action": "none",
        "z-index": "10000000",
        "fontSize": "25px",
        "will-change": "transform"
      };

      // Init, and set properties
      this.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
     */

    // Applies css `properties` to an element.
    function applyProperties( target, properties ) {
      for( var key in properties ) {
        target.style[ key ] = properties[ key ];
      }
    }

    if (!('ontouchstart' in window || navigator.msMaxTouchPoints)) init();
  })();