1

При наведении на элемент должен плавно менятся курсор, написал такой код для смены курсора:

.element{
  width: 300px;
  height: 300px;
  transition: 0.5s ease-in-out;
  background: #333;
  cursor:url(курсор_1);
}
.element:hover{
  cursor:url(курсор_2);
}

И здесь курсор меняется, но вот меняется он всегда моментально и нельзя сделать плавный переход от курсора 1 к курсору 2.

Как можно с анимировать плавную смену курсора в данном случае на js или на css?

3
  • Скриншот курсора можно? Я понял вашу идею, но тут вешается элемент и JS перемещается по экрану эмитирую курсор, и уже его можно будет анимировать. Побольше подробностей бы
    – MoloF
    7 дек 2019 в 20:10
  • в частности хочу менять курсор иконки "arrow-left-circle" на "arrow-right-circle", есть ещё несколько идей но то второстепенно. Ресурс с иконками - feathericons.com
    – Кевин
    7 дек 2019 в 20:48
  • Лично я скачивал размером в 45 пиксель каждую, но можете использовать любой курсор по вашему желанию, мне интересно понять идею
    – Кевин
    7 дек 2019 в 20:51

2 ответа 2

1

Можно изобразить что-то такое:

let arrow = i => `<svg 
  xmlns='http://www.w3.org/2000/svg' 
  xmlns:xlink='http://www.w3.org/1999/xlink' 
  width='32px' 
  height='32px' 
  viewBox='-26 -26 52 52'>
  
    <path 
      transform='rotate(${i/100*180-90})' 
      d='M0,15v-30l-10,10M0,15v-30l10,10' 
      stroke='black' 
      fill='none' 
      stroke-width='5' 
      stroke-linejoin='round' />
          
    <circle 
      r='23' 
      stroke='black' 
      fill='none' 
      stroke-width='5' />
      
</svg>`;

document.head.innerHTML += `<style>
  @keyframes cur {${Array(101).fill(0).map((_, i) => `${i}% {
    cursor: url("data:image/svg+xml,${encodeURIComponent(arrow(i))}") 16 16, pointer;
  }`).join('')}}
<style>
`;
.left, .right {
  width: 45vw;
  height: 90vh;
  background: wheat;
  float:left
}

.right:hover {
  animation: cur 500ms forwards;
}

.left:hover {
  animation: cur 500ms forwards reverse;
}
<div class="left"></div>
<div class="right"></div>

1
  • 1
    Спасибо!!!! Класс! 14 дек 2019 в 15:45
0

На будущее: плавная анимация возможна только для свойств, у которых в принципе вычислимо промежуточное состояние. Например, цвет текста или фона, размеры, угол поворота.

Если промежуточных состояний быть не может, то и анимации не будет - например, для свойства display (а как бы вы представили промежуточное состояние между display:none и display:block?) или background-image (было url('../my_img.jpg'), стало url('/images/new_file.png'), что должно быть средним для этих двух значений?).

То же самое относится к свойству cursor.

Но можно попробовать обойти это, добавив МНОГО курсоров (например, десяток) и css-анимацию по кадрам на, скажем, полсекунды.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.