Man sieht es bei Webseiten immer wieder – anstatt dass es der normale Mauszeiger ist, hat die Webseite eine eigene Version erstellt. Ich rede hier jetzt nicht davon, einfach ein SVG einzubinden – das könnte man auch machen. Nein, ich rede von einem mit CSS designten Mauszeiger.

Viele denken, so ein Mauszeiger müsse sehr kompliziert aufgebaut sein. Heute zeige ich euch mal, wie man so etwas machen kann. Natürlich kann man den Code noch verbessern, aber hier lernen wir, wie man etwas an den Mauszeiger anbinden kann.

Viel Spass.

Video

HTML

<div class="cursor"></div>

CSS

.cursor {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #000;
  background: rgba(255, 108, 108, 0.8);
  position: absolute;
  transform: translate(-50%, -50%);
  animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.4);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

Javascript

document.addEventListener("DOMContentLoaded", function() {
const cursor = document.querySelector(".cursor")

document.addEventListener('mousemove', e => {
    
    //console.log(e);
    cursor.setAttribute("style", "top: "+e.pageY+"px; left: "+e.pageX+"px;")
})
});