Is it possible to change this red box with a cursor? I don't want to use an image. thank you
.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>You can use some 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>You can use css hover selector .pointer:hover{} or you make it with Javascript:
const elem.document.querySelector(".pointer");
elem.addEventListener("mouseover", yourFunction());
.pointer:hover{
// Do stuff here
}