Rainbow Mouse Path – csshint

Find out how to create Rainbow Mouse Path utilizing html css and js. Designed by Marjo Sobrecaray a codepen consumer.

HTML

<p>transfer your mouse</p>

CSS (SCSS)

@import url('https://fonts.googleapis.com/css?household=Paytone+One');
@import 'compass/css3';

physique,html {
     background:#060a19;
     width:100%;
     peak: 100%;
     overflow:hidden;
     font-family: Paytone One;
}
@mixin keyframes($animationName) {
  @-webkit-keyframes #{"$animationName"} {
    @content material;
  }
  @-moz-keyframes #{$animationName} {
    @content material;
  }

  @-ms-keyframes #{$animationName} {
    @content material;
  }

  @keyframes #{$animationName} {
    @content material;
  }
}
p {
     coloration: #fff;
     background: #000;
     mix-blend-mode: lighten;
     font-size:30px;
     text-align: heart;
     place: absolute;
     left:0;
     proper: 0;
     high:0;
     backside: 0;
     margin:auto;
     peak: 100px;
     @embody animation(filterHue2 2s linear infinite);
     
     &::earlier than {
          content material: '';
          show: block;
          place: absolute;
          high: 0;
          proper: 0;
          backside: 0;
          left: 0;
          background: #e23b4a; //fallback
          @embody background(linear-gradient(to proper,#23966c, #faaa54, #e23b4a, #db0768, #360670));
          pointer-events: none;
          mix-blend-mode: multiply;
     }
}

.loader-container {
     width:100px;
     peak:100px;
     place: absolute;
     @embody animation(scaleUp .5s linear);
     @embody remodel(scale(0));
     opacity: 0;
     .loader {
          background: #ff0c0c;
          @embody background(linear-gradient(50deg,#ff0c0c,#21d400));
          border-radius:10px;
          @embody filter(hue-rotate(0deg));
          animation: filterHue 2.5s linear infinite;
          peak:100%;
          width: 100%;
          remodel:rotate(0deg);
          &::after {
               content material:'';
               place:absolute;
               peak: 80px;
               width:80px;
               left:10px;
               high:10px;
               border-radius: 100%;
          }
     }
}

@embody keyframes(filterHue2) {
     50%{@embody filter(hue-rotate(1000deg));}
     100% {@embody filter(hue-rotate(2000deg)); }
}

@embody keyframes(filterHue) {
     50%{@embody filter(hue-rotate(1000deg));}
     100% {@embody filter(hue-rotate(2000deg));
     @embody remodel(rotate(360deg));}
}
@embody keyframes(scaleUp) {
     50%{@embody remodel(scale(0.5));opacity: 1}
     100% {@embody remodel(scale(0.25));}
}


@helps (-ms-ime-align: auto) {
  p {
    coloration: #21d400;
    background: clear;
    mix-blend-mode: lighten;
    font-size: 30px;
    text-align: heart;
    place: absolute;
    left: 0;
    proper: 0;
    high: 0;
    backside: 0;
    margin: auto;
    peak: 100px;
    @embody animation(filterHue2 2s linear infinite);
  }
  p::earlier than {
    content material: '';
    show: block;
    place: absolute;
    high: 0;
    proper: 0;
    backside: 0;
    left: 0;
    background: clear;
  }
}


@media all and (-ms-high-contrast: none), (-ms-high-contrast: lively) {
     p {
          coloration: #ff447c;
          background: clear;
          mix-blend-mode: lighten;
          font-size: 30px;
          text-align: heart;
          place: absolute;
          left: 0;
          proper: 0;
          high: 0;
          backside: 0;
          margin: auto;
          peak: 100px;
          @embody animation(filterHue2 2s linear infinite);
     }
     p::earlier than {
          content material: '';
          show: block;
          place: absolute;
          high: 0;
          proper: 0;
          backside: 0;
          left: 0;
          background: clear;
     }
     
     .loader {
          @embody background(linear-gradient(50deg,rgba(240, 0, 80, 1),#2380ff) !vital); 
     }
}

JS

window.addEventListener("mousemove", perform (e) {
     var to_append = doc.getElementsByClassName('loader-container')[0];
     var all = doc.getElementsByClassName('loader-container');

     var parent_div = doc.createElement('div');
     parent_div.className = "loader-container";
     var inner_div = doc.createElement('div');
     inner_div.className = "loader";
     parent_div.appendChild(inner_div)
     var d = doc.physique.appendChild(parent_div);

     parent_div.fashion.left = (e.clientX - 50)+'px';
     parent_div.fashion.high = (e.clientY - 50)+'px';

     if(doc.getElementsByClassName('loader-container').size > 50) {
          doc.physique.removeChild(to_append)
     }
});