Rainbow Mouse Trail using HTML, CSS and JS

This Rainbow Mouse Trail Animation is developed using HTML, CSS, and JavaSript. This code did not use third-party libraries, it only used pure HTML, CSS, and JavaScript.

To build structure, HTML and CSS were used for the design. Only JavaScript used to detect mouse movements and add CSS styles dynamically.

You can see the full code of this animation. And there is a video tutorial also.

HTML Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Rainbow Mouse Trail - DevXmart</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <p>move your mouse</p>
    <script src="./script.js"></script>
  </body>
</html>


CSS Code

@import url("https://fonts.googleapis.com/css?family=Paytone+One");
body, html {
  background: #060a19;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: Paytone One;
}

p {
  color: #fff;
  background: #000;
  mix-blend-mode: lighten;
  font-size: 30px;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 100px;
  -moz-animation: filterHue2 2s linear infinite;
  -webkit-animation: filterHue2 2s linear infinite;
  animation: filterHue2 2s linear infinite;
}
p::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #e23b4a;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIzOTY2YyIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjZmFhYTU0Ii8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNlMjNiNGEiLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iI2RiMDc2OCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzM2MDY3MCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #23966c), color-stop(25%, #faaa54), color-stop(50%, #e23b4a), color-stop(75%, #db0768), color-stop(100%, #360670));
  background: -moz-linear-gradient(left, #23966c, #faaa54, #e23b4a, #db0768, #360670);
  background: -webkit-linear-gradient(left, #23966c, #faaa54, #e23b4a, #db0768, #360670);
  background: linear-gradient(to right, #23966c, #faaa54, #e23b4a, #db0768, #360670);
  pointer-events: none;
  mix-blend-mode: multiply;
}

.loader-container {
  width: 100px;
  height: 100px;
  position: absolute;
  -moz-animation: scaleUp 0.5s linear;
  -webkit-animation: scaleUp 0.5s linear;
  animation: scaleUp 0.5s linear;
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
  opacity: 0;
}
.loader-container .loader {
  background: #ff0c0c;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9Ii0wLjAzOTYxNCIgeTE9IjAuOTUyNzkiIHgyPSIxLjAzOTYxNCIgeTI9IjAuMDQ3MjEiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZjBjMGMiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyMWQ0MDAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background: -moz-linear-gradient(40deg, #ff0c0c, #21d400);
  background: -webkit-linear-gradient(40deg, #ff0c0c, #21d400);
  background: linear-gradient(50deg, #ff0c0c, #21d400);
  border-radius: 10px;
  -webkit-filter: hue-rotate(0deg);
  filter: hue-rotate(0deg);
  animation: filterHue 2.5s linear infinite;
  height: 100%;
  width: 100%;
  transform: rotate(0deg);
}
.loader-container .loader::after {
  content: '';
  position: absolute;
  height: 80px;
  width: 80px;
  left: 10px;
  top: 10px;
  border-radius: 100%;
}

@-webkit-keyframes $animationName {
  50% {
    -webkit-filter: hue-rotate(1000deg);
    filter: hue-rotate(1000deg);
  }
  100% {
    -webkit-filter: hue-rotate(2000deg);
    filter: hue-rotate(2000deg);
  }
}
@-moz-keyframes filterHue2 {
  50% {
    -webkit-filter: hue-rotate(1000deg);
    filter: hue-rotate(1000deg);
  }
  100% {
    -webkit-filter: hue-rotate(2000deg);
    filter: hue-rotate(2000deg);
  }
}
@-ms-keyframes filterHue2 {
  50% {
    -webkit-filter: hue-rotate(1000deg);
    filter: hue-rotate(1000deg);
  }
  100% {
    -webkit-filter: hue-rotate(2000deg);
    filter: hue-rotate(2000deg);
  }
}
@keyframes filterHue2 {
  50% {
    -webkit-filter: hue-rotate(1000deg);
    filter: hue-rotate(1000deg);
  }
  100% {
    -webkit-filter: hue-rotate(2000deg);
    filter: hue-rotate(2000deg);
  }
}
@-webkit-keyframes $animationName {
  50% {
    -webkit-filter: hue-rotate(1000deg);
    filter: hue-rotate(1000deg);
  }
  100% {
    -webkit-filter: hue-rotate(2000deg);
    filter: hue-rotate(2000deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes filterHue {
  50% {
    -webkit-filter: hue-rotate(1000deg);
    filter: hue-rotate(1000deg);
  }
  100% {
    -webkit-filter: hue-rotate(2000deg);
    filter: hue-rotate(2000deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-ms-keyframes filterHue {
  50% {
    -webkit-filter: hue-rotate(1000deg);
    filter: hue-rotate(1000deg);
  }
  100% {
    -webkit-filter: hue-rotate(2000deg);
    filter: hue-rotate(2000deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes filterHue {
  50% {
    -webkit-filter: hue-rotate(1000deg);
    filter: hue-rotate(1000deg);
  }
  100% {
    -webkit-filter: hue-rotate(2000deg);
    filter: hue-rotate(2000deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes $animationName {
  50% {
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    -moz-transform: scale(0.25);
    -ms-transform: scale(0.25);
    -webkit-transform: scale(0.25);
    transform: scale(0.25);
  }
}
@-moz-keyframes scaleUp {
  50% {
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    -moz-transform: scale(0.25);
    -ms-transform: scale(0.25);
    -webkit-transform: scale(0.25);
    transform: scale(0.25);
  }
}
@-ms-keyframes scaleUp {
  50% {
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    -moz-transform: scale(0.25);
    -ms-transform: scale(0.25);
    -webkit-transform: scale(0.25);
    transform: scale(0.25);
  }
}
@keyframes scaleUp {
  50% {
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    -moz-transform: scale(0.25);
    -ms-transform: scale(0.25);
    -webkit-transform: scale(0.25);
    transform: scale(0.25);
  }
}
@supports (-ms-ime-align: auto) {
  p {
    color: #21d400;
    background: transparent;
    mix-blend-mode: lighten;
    font-size: 30px;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 100px;
    -moz-animation: filterHue2 2s linear infinite;
    -webkit-animation: filterHue2 2s linear infinite;
    animation: filterHue2 2s linear infinite;
  }

  p::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: transparent;
  }
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  p {
    color: #ff447c;
    background: transparent;
    mix-blend-mode: lighten;
    font-size: 30px;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 100px;
    -moz-animation: filterHue2 2s linear infinite;
    -webkit-animation: filterHue2 2s linear infinite;
    animation: filterHue2 2s linear infinite;
  }

  p::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: transparent;
  }

  .loader {
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9Ii0wLjAzOTYxNCIgeTE9IjAuOTUyNzkiIHgyPSIxLjAzOTYxNCIgeTI9IjAuMDQ3MjEiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmMDAwNTAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyMzgwZmYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=') !important;
    background: -moz-linear-gradient(40deg, #f00050, #2380ff) !important;
    background: -webkit-linear-gradient(40deg, #f00050, #2380ff) !important;
    background: linear-gradient(50deg, #f00050, #2380ff) !important;
  }
}


JavaScript Code


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

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

	parent_div.style.left = (e.clientX - 50)+'px';
	parent_div.style.top = (e.clientY - 50)+'px';

	if(document.getElementsByClassName('loader-container').length > 50) {
		document.body.removeChild(to_append)
	}
});


Video Tutorial

Tags:
Previous Post Next Post
Share to other apps
Copy Post Link

Contact Form