Я пытаюсь создать небольшой пользовательский курсор, элемент img * следует за курсором пользователя, используя JS - что мне удалось - но заметил, что когда я быстро перемещаю курсор, он обрезается / размывается Точка, в которой ты больше не видишь. Я заметил, что это происходит с элементами в целом, когда есть движение.
Я создал небольшой документ, чтобы проверить его. Вот CSS:
@keyframes move {
from {left: 400px}
to {left: 1200px}
}
#circle {
position: fixed;
width: 100px; height: 100px;
background-color: red;
border-radius: 100%;
animation: move 0.8s ease-in-out alternate infinite;
}
Затем в теле HTML,
<div id="circle"></div>
Когда круг смещается вправо, правая сторона его обрезается и становится квартира. Чем быстрее он движется вправо, тем больше правой стороны отсекается. То же самое касается, когда он идет влево, вниз или вверх. Я запускаю это на Chrome версии 80.0.3987.163.
* (мне нужно переместить курсор позже, поэтому я не использую css cursor: url(), auto)
Изображения:
