¿Es posible cambiar este cuadro rojo con un cursor? No quiero usar una imagen. gracias
.pointer { width: 100px; height: 100px; background: red; bottom: 0px; left: 0px; position: fixed; animation-name: mouse; animation-duration: 4s; animation-iteration-count: infinite; } @keyframes mouse { 0% { left: 100px; bottom: 0px } 100% { left: 500px; bottom: 300px } } <span class="pointer"></span>Puedes usar algún svg.
.pointer { width: 100px; height: 100px; bottom: 0px; left: 0px; position: fixed; animation-name: mouse; animation-duration: 4s; animation-iteration-count: infinite; } .pointer svg { max-height: 100%; max-width: 100%; width: 100%; height: 100%; } @keyframes mouse { 0% { left: 100px; bottom: 0px } 100% { left: 500px; bottom: 300px } } <span class="pointer"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="1064.7701 445.5539 419.8101 717.0565" enable-background="new 1064.7701 445.5539 419.8101 717.0565" xml:space="preserve"> <polygon fill="#FF0000" points="1283.1857,1127.3097 1406.1421,1077.6322 1314.2406,850.1678 1463.913,852.7823 1093.4828,480.8547 1085.4374,1005.6964 1191.2842,899.8454 "/> </svg> </span>Puede usar css hover selector .pointer:hover{} o hacerlo con Javascript:
const elem.document.querySelector(".pointer"); elem.addEventListener("mouseover", yourFunction());.pointer:hover{ // Do stuff here }