Анимация курсора в Атоме


Оказывается в Атоме это сделать совсем нетрудно, а эффект получается очень даже зачетный).
Для этого достаточно в стили (меню atom->Stylesheets) добавить следующую строку:

.cursor, atom-text-editor::shadow .cursor {
  transition: 150ms;
}

Можно добавить небольшой Bounce-эффект за счет использования функции cubic-bezier, тогда год будет выглядеть так:

.cursor, atom-text-editor::shadow .cursor {
  transition: 150ms cubic-bezier(.31,.16,.12,1.24);
}

(UPDATED) Не так давно Atom начал выдавать уведомление об устаревшем селекторе


.cursor, atom-text-editor::shadow .cursor. 

Для того, чтобы можно было дальше продолжить использовать анимированный курсор необходимо заменить данный селектор на


.cursor, atom-text-editor.editor .cursor

Комментарии

Популярные сообщения из этого блога

MODx Evo и ReCaptcha v2

P3D – 3D модель в браузере

Подключение тяжелых библиотек