Create a Mesmerizing Animated Custom Cursor in Elementor

				
					<style>
body {
  cursor: none!important; /* Default system cursor */
  
}
a , button {
  cursor: none!important; /* Hide the default pointer cursor on links */
}
a:hover .custom-cursor,
button:hover .custom-cursor {
  transform: scale(1.8)!important; /* Enlarge cursor when hovering over links or buttons */
}
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 32px; /* Default size */
  height: 32px;
  background: url('********* CURSOR IMAGE ONE **********') no-repeat center;
  background-size: contain;
  pointer-events: none;
  transform: translate(-0%, -0%);
  transition: background 0.3s ease, transform 0.3s ease;
  z-index: 9999999;
	transform-origin: center center; /* Ensures rotation happens around the center */
    animation: rotateDiagonal 3s linear infinite; /* Animation for continuous rotation */
	  will-change: transform, box-shadow;
	
}
.cursor-shadow {
    position: fixed;
	top: 0;
  left: 0;
    width: 30px;
    height: 30px;
    background: url('********* CURSOR IMAGE ONE **********') no-repeat center;
    background-size: contain;
    border-radius: 50%;
  filter: blur(4px) opacity(0.7); /* Stronger blur effect */
	animation: rotateDiagonal 3s linear infinite; /* Animation for continuous rotation */
    z-index: 9999997; /* Behind the cursor */
    
		pointer-events: none; /* Ensure the shadow doesn't interfere with other elements */
  }
	  /* Keyframes for diagonal spin (rotate3d on X, Y, Z axes) */
@keyframes rotateDiagonal {
    0% {
      transform: rotate3d(1, 1, 0, 0deg); /* Starting position, rotation along X and Y axes */
    }
    50% {
      transform: rotate3d(1, 1, 0, 180deg); /* Half turn, still on the X and Y axes */
    }
    100% {
      transform: rotate3d(1, 1, 0, 360deg); /* Full turn, back to the front */
    }
  }

</style>
<script>
  document.addEventListener('DOMContentLoaded', function () {
   
  // Create the custom cursor element
  const customCursor = document.createElement('div');
  customCursor.classList.add('custom-cursor');
  
  const shadow = document.createElement('div');
  shadow.classList.add('cursor-shadow');
  
  document.body.appendChild(customCursor);
  document.body.appendChild(shadow);

    // Update custom cursor position on mouse move
    document.addEventListener('mousemove', (e) => {
      customCursor.style.left = `${e.clientX}px`;
      customCursor.style.top = `${e.clientY}px`;
			shadow.style.left = `${e.clientX }px`;
      shadow.style.top = `${e.clientY + 10}px`;
    });

    // Handle mouse enter/leave events for links
    const links = document.querySelectorAll('a, button');
    links.forEach(link => {
      link.addEventListener('mouseenter', () => {
        customCursor.style.background = 'url("********* CURSOR IMAGE TWO **********") no-repeat center';
				
          customCursor.style.transform = 'scale(1.8)';// Enlarge on hover
				
      });
      link.addEventListener('mouseleave', () => {
        customCursor.style.background = 'url("********* CURSOR IMAGE ONE **********") no-repeat center';
        customCursor.style.transform = 'scale(1)';  // Reset to default cursor size
				
      });
    });
		// Hide the custom cursor when mouse leaves the window
    window.addEventListener('mouseout', () => {
      customCursor.style.display = 'none'; // Hide cursor when mouse leaves the window
			shadow.style.display = 'none'; // Hide shadow as well
    });

    // Show the custom cursor when mouse enters the window again
    window.addEventListener('mouseover', () => {
      customCursor.style.display = 'block'; // Show cursor when mouse re-enters the window
			shadow.style.display = 'block'; // Show shadow again
    });
  });
</script>