Блог

Главная - Вопросы по программированию - Плавный переход между курсорами

Плавный переход между курсорами

#html #css #cursor #fade

Вопрос:

Есть ли способ создать анимацию затухания при смене курсора. Например, при наведении курсора мыши на элемент

 * {
  margin: 0;
  padding: 0;
}

#cursor {
  cursor: pointer;
  border: 1px solid;
  border-radius: 3px;
  padding: 0.5em;
  display: inline-block;
  margin: 1em;
} 
 <div id="cursor">Hover for a pointer Cursor!</div>

Вот гифка того, как это выглядит сейчас:

https://media3.giphy.com/media/GgQ7oYtHooxPVY2Lyv/giphy.gif?cid=790b7611b1f1a99cc77af7ed35864d8e6ecec26fb6c06c14amp;rid=giphy.gifamp;ct=g

Комментарии:

1. В GIF не отображается переход к затуханию — он выглядит так же, как в примере кода. Можете ли вы уточнить, чего вы пытаетесь достичь?

2. Нет, я сомневаюсь, что есть какой-либо способ сделать это с cursor собственностью. Вам, вероятно, придется заменить собственный курсор реализацией, которая перемещает фактический элемент в соответствии с положением мыши (что довольно сильно снижает производительность, связано с проблемами удобства использования и, вероятно, вообще не стоит того, для такого незначительного эффекта).

3. @Мартин, в том-то и дело. Я показывал, как это выглядит прямо сейчас.

4. @JustChillinInDaHood Ах ладно, я не совсем понял это. Фрагмент показывает, что он работает так же — я предполагал, что GIF будет показывать желаемое поведение.

5. @Мартин, о, прости. я отредактирую предложение

Метки: