CODEWITHSUNDEEP
javascript
poke2021
poke2021

Reputation: 11

Cursor - animation javascript

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>

Upvotes: 1

Views: 401

Answers (3)

naxsi
naxsi

Reputation: 622

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>

Upvotes: 2

Maik Lowrey
Maik Lowrey

Reputation: 17566

You can use css hover selector .pointer:hover{} or you make it with Javascript:

const elem.document.querySelector(".pointer");
elem.addEventListener("mouseover", yourFunction());

Upvotes: 0

Emil Karlsson
Emil Karlsson

Reputation: 1078

.pointer:hover{
    // Do stuff here
}

Upvotes: 0

Related Questions