Пользовательский курсор CSS

Курсор указывает место на экране, где пользователь может щелкнуть мышью или ввести текст. Для разных компонентов веб-сайта могут использоваться разные курсоры. Разработчик должен убедиться, что курсоры, используемые в приложении, должны быть привлекательными. Например, курсор в виде руки можно использовать на кнопке при наведении курсора мыши. Индикатор текста (мигающая строка) используется в текстовом поле, в которое необходимо ввести текст.

В CSS можно использовать несколько стилей курсора, просто указав значение свойства курсора. Однако разработчик может создать собственный курсор с помощью CSS.

В этом учебном пособии будут представлены:

- CSS-курсор
- Пользовательский курсор CSS

Прежде чем перейти к теме, давайте рассмотрим некоторые формы курсора CSS на практическом примере.

CSS-курсор

CSS « курсор ” имеет разные значения, такие как указатель, значение none, прогресс и т. д. Давайте создадим таблицу, содержащую строки, на которых будут отображаться разные курсоры при наведении мыши.

Пример: создание таблицы, представляющей различные курсоры CSS в HTML

Сначала добавьте элемент

в HTML. Внутри этого элемента:

- Тег

будет использоваться для создания строк.

Первая строка содержит заголовки.

Эти заголовки указываются с помощью тегов

содержат два тега

. Другие теги
для заполнения столбцов данными. Второй тег	представляет элементы кнопки, которые применяются с помощью CSS. курсор ” с разными значениями. HTML-код для описанного выше сценария приведен ниже: < Таблица > < тр > < й стиль знак равно 'ширина: 200 пикселей;' > css селектор курсора й > < й стиль знак равно 'ширина: 200 пикселей;' > стиль курсора й > тр > < тр > < тд > курсор: указатель тд > < тд >< кнопка стиль знак равно 'курсор: указатель;' > указатель кнопка > тд > тр > < тр > < тд > курсор: прогресс тд > < тд >< кнопка стиль знак равно 'курсор: прогресс;' > прогресс кнопка > тд > тр > < тр > < тд > курсор: не разрешено тд > < тд >< кнопка стиль знак равно 'курсор: не разрешено;' > не положено кнопка > тд > тр > < тр > < тд > курсор: нет тд > < тд >< кнопка стиль знак равно 'курсор: нет;' > никто кнопка > тд > тр > < тр > < тд > курсор: двигаться тд > < тд >< кнопка стиль знак равно 'курсор: двигаться;' > двигаться кнопка > тд > тр > < тр > < тд > курсор: захватить тд > < тд >< кнопка стиль знак равно 'курсор: захватить;' > схватить кнопка > тд > тр > < тр > < тд > курсор: копировать тд > < тд >< кнопка стиль знак равно 'курсор: копировать;' > копировать кнопка > тд > тр > < тр > < тд > курсор: изменить размер столбца тд > < тд >< кнопка стиль знак равно 'курсор: col-resize;' > изменить размер цвета кнопка > тд > тр > < тр > < тд > курсор: изменение размера строки тд > < тд >< кнопка стиль знак равно 'курсор: изменение размера строки;' > изменение размера строки кнопка > тд > тр > < тр > < тд > курсор: текст тд > < тд >< кнопка стиль знак равно 'курсор: текст;' > текст кнопка > тд > тр > Таблица > Приведенный выше код сгенерирует следующий результат: В следующем разделе мы применим различные стили к элементам HTML. Стиль «все» элементы * { заполнение: 0 ; прибыль: 0 ; семейство шрифтов: Arial, Helvetica, без засечек; } Все элементы HTML применяются со стилями CSS, которые описаны ниже: “ набивка ” недвижимость с “ 0 » не включает пробелы вокруг содержимого элемента. “ прибыль ” недвижимость с “ 0 ” value не добавляет пробела за пределами каждого из элементов. “ семейство шрифтов ” свойству присваивается значение “ Arial, Helvetica, без засечек ». Список стилей шрифтов приведен для того, чтобы убедиться, что если первый стиль не поддерживается браузером, необходимо применить другие стили. Стиль «Таблица» Элемент Таблица { поле: 0px авто; граница: 1px сплошная Гейнсборо; } Элемент таблицы HTML применяется со свойствами CSS, описанными ниже: “ граница ” установлено значение “ 1px сплошной Гейнсборо », который представляет ширину границы, стиль границы и цвет границы соответственно. “ прибыль ” ведет себя, как указано выше. Элемент стиля «td» тд { выравнивание текста: по центру; } Элемент	применяется со свойством « выравнивание текста ' со значением ' центр ». Это выровняет текст столбца по центру. Элемент стиля «кнопка» кнопка { цвет фона: кадетский синий; отступ: 10px 10px; цвет: #фффффф; ширина: 150 пикселей; } Элемент кнопки, используемый в приведенном выше HTML-коде, оформлен с использованием новых свойств CSS, которые объясняются ниже: “ фоновый цвет ” определяет цвет фона элемента. “ набивка ” со значениями, назначенными как “ 10 пикселей 10 пикселей » добавляет пространство 10 пикселей сверху вниз и 10 пикселей слева и справа от элементов элемента. “ цвет » регулирует цвет шрифта элемента. “ ширина ” — это свойство, которое регулирует ширину элемента. Приведенный выше код сгенерирует следующий результат: До сих пор мы обсуждали курсоры, предоставляемые CSS. В следующем разделе в примере будет описано, как создать собственный курсор с помощью CSS. Пользовательский курсор CSS Разработчики должны использовать подходящие курсоры для своих приложений. Курсоры должны быть сделаны привлекательными, чтобы привлечь внимание пользователей. Более того, для этой цели может быть создан пользовательский курсор. Посмотрите на пример ниже! Пример: Как создать собственный курсор с помощью CSS? В HTML добавьте два элемента div. Один с классом ' круг », а другой с классом « точка ». HTML < див учебный класс знак равно 'круг' > див > < див учебный класс знак равно 'точка' > див > Давайте перейдем к разделу CSS. Элемент стиля «тело» тело { высота: 100вх; } К элементу body файла HTML применяется стиль « рост » для установки высоты элемента. Стиль div «круг» .круг { ширина: 20 пикселей; высота: 20 пикселей; граница: 2 пикселя сплошного белого цвета; радиус границы: 50 % ; } Ниже приведено объяснение свойств CSS, которые применяются к элементу div, имеющему класс « круг ”: “ ширина » регулирует ширину элемента. “ граница ” со значением, указанным как “ 2px сплошной белый ” представляет ширину границы, стиль границы и цвет. “ радиус границы » изменяет круглую границу элемента. Стиль «точка» div .точка { ширина: 5 пикселей; высота: 5 пикселей; цвет фона: белый; радиус границы: 50 % ; } Элемент div с точкой класса имеет различные свойства, описанные ниже: “ фоновый цвет ” определяет цвет фона элемента. “ радиус границы » закругляет края элемента. Другие свойства будут работать так же, как обсуждалось. Данный код отобразит на веб-странице следующий курсор: Мы создали курсор с помощью HTML и CSS. Теперь в следующем разделе написан код JavaScript для добавления необходимой функциональности курсору. JavaScript < сценарий > const cursorCircle = документ.querySelector ( '.круг' ) ; const cursorPoint = документ.querySelector ( '.точка' ) ; константа перемещения курсора = ( и ) знак равно > { const mouseY = e.clientY; const mouseX = e.clientX; cursorCircle.style.transform = ` переводить ( ${мышьX} пкс, ${мышьY} пикс. ) ` ; cursorPoint.style.transform = ` переводить ( ${мышьX} пкс, ${мышьY} пикс. ) ` ; } окно.addEventListener ( 'переместить мышь' , двигатьсяКурсор ) сценарий > Описание приведенного выше кода JavaScript приведено ниже: “ <скрипт> ” сочетается с тегом , который используется для написания кода JavaScript. “ константа Ключевое слово ” указывает, что ключевое слово const, за которым следует переменная, не может быть переназначено. “ document.querySelector('.circle') » возвращает элемент div в виде круга, который соответствует указанному селектору в документе. “ document.querySelector(‘.point’) » возвращает элемент div точки, который соответствует указанному селектору в документе. “ const moveCursor = (e) => ” эта функция определяет функцию курсора. “ e.clientY » возвращает вертикальную координату при срабатывании события мыши. “ e.clientX » возвращает горизонтальную координату, когда срабатывает событие мыши. “ курсорКруг.стиль.преобразование ” Div круга применяется с преобразованием стиля. “ cursorPoint.style.transform ” точка div применяется с преобразованием стиля. “ перевести(${мышьX}px, ${мышьY}px) ” значение свойства transform задает горизонтальные и вертикальные координаты. “ window.addEventListener («мышь», moveCursor) ” метод слушателя событий будет прослушивать движение мыши. Это часть глобального объекта окна. После предоставления указанных выше блоков кода курсор автоматически перемещается по экрану, как показано ниже: Это классно! Мы создали собственный курсор с различными свойствами CSS. Заключение CSS « курсор ” имеет множество значений, которые указывают на различные стили курсора. Однако, используя элементы HTML и свойства CSS, мы можем создавать собственные курсоры. Затем реализуется код JavaScript для активации его функциональности. Это исследование продемонстрировало, как создавать собственные курсоры CSS на практическом примере. Другой Категория Raspberry Pi Ethernet Другой Нано Зум Корица Отзывы Zorinos Радио Шахтерское Ремесло Ssh Openvas Сжатие Ларавел Трещина Офисное Программное Обеспечение Для Повышения Производительности Ботинок Системные Вызовы Sysctl Сеть Гпу Канитель Сплетение Uefi Докер Межсетевой Экран Wireshark Синология Pdf Эфириум Ос Parrot Возвышенный Selinux Hyper-V Телефон Код Гном Деликатность Мышь Nmap Метасплоит Торрент Планшет Pycharm Завиток Куда Gcc Шрифты Ssl Nvidia Изображений Usb Кальмар Приятель Vlc Media Player Dns Биткойн Клавиатура Inkscape Шифрование Шляпа Owncloud Сканер Атом Красная Шапка Teamviewer Скайп Vpn Xfce Блокнот Jupyter Нфс Блог Lvm Suse Медиаплееры Posix Стим Дженкинс Власть Oracle Linux Netstat Кв.м Блютуз Ssd Рукоятка Gentoo Одиссея Аудио Процессор Тензорный Поток Autodesk Lubuntu Llvm Windows Microsoft Edge (Устаревшая Версия) Internet Explorer Офис Другой скайп Веб-камера медиаплееры cPanel хапрокси гном ботинок возвышенный Направляющие Для Снятия Убунту 24.04 следующее облако достоинство USB-проходной порт шляпа-федора #безопасная загрузка Популярные посты Почему сборка Docker не показывает вывод команд? Другой Какой тип базы данных Oracle? Другой Монитор процессов «Невозможно записать PROCMON23.SYS» Включение ведения журнала загрузки - Winhelponline Windows Что такое директива #define в C++ Другой Что такое Amazon Simple Email Service и как его использовать? Другой Как исправить ошибку при обновлении изношенных предметов в Roblox Другой Как использовать DALL-E для перевода изображений в изображения? Другой Как настроить сторожевой таймер на Raspberry Pi (автоматическая перезагрузка не отвечает на Raspberry Pi) Другой Как получить идентификатор нажатой кнопки с помощью JavaScript/jQuery? Другой Как отключить NFC на Android Другой Как написать и использовать символ бесконечности в LaTeX Другой Функция Power BI SWITCH (DAX): синтаксис, использование и примеры Другой Включить двухфакторную аутентификацию с помощью ключей безопасности — QR-код — Roblox Другой Как копировать массивы с помощью memmove() в программировании на C Другой Как установить будильник на MacBook? Другой Как проверить, содержит ли строка точку в JavaScript Другой Модуль FileHandle в Perl Другой RegFileExport помогает экспортировать данные из автономных кустов реестра - Winhelponline Блог Как настроить AWS Site-to-Site VPN Другой Как использовать темы Emacs Другой

. Другие теги

для заполнения столбцов данными.

Второй тег

представляет элементы кнопки, которые применяются с помощью CSS. курсор ” с разными значениями.

HTML-код для описанного выше сценария приведен ниже:

< Таблица >
< тр >
< й стиль знак равно 'ширина: 200 пикселей;' > css селектор курсора й >
< й стиль знак равно 'ширина: 200 пикселей;' > стиль курсора й >
тр >
< тр >
< тд > курсор: указатель тд >
< тд >< кнопка стиль знак равно 'курсор: указатель;' > указатель кнопка > тд >
тр >
< тр >
< тд > курсор: прогресс тд >
< тд >< кнопка стиль знак равно 'курсор: прогресс;' > прогресс кнопка > тд >
тр >
< тр >
< тд > курсор: не разрешено тд >
< тд >< кнопка стиль знак равно 'курсор: не разрешено;' > не положено кнопка > тд >
тр >
< тр >
< тд > курсор: нет тд >
< тд >< кнопка стиль знак равно 'курсор: нет;' > никто кнопка > тд >
тр >
< тр >
< тд > курсор: двигаться тд >
< тд >< кнопка стиль знак равно 'курсор: двигаться;' > двигаться кнопка > тд >
тр >
< тр >
< тд > курсор: захватить тд >
< тд >< кнопка стиль знак равно 'курсор: захватить;' > схватить кнопка > тд >
тр >
< тр >
< тд > курсор: копировать тд >
< тд >< кнопка стиль знак равно 'курсор: копировать;' > копировать кнопка > тд >
тр >
< тр >
< тд > курсор: изменить размер столбца тд >
< тд >< кнопка стиль знак равно 'курсор: col-resize;' > изменить размер цвета кнопка > тд >
тр >
< тр >
< тд > курсор: изменение размера строки тд >
< тд >< кнопка стиль знак равно 'курсор: изменение размера строки;' > изменение размера строки кнопка > тд >
тр >
< тр >
< тд > курсор: текст тд >
< тд >< кнопка стиль знак равно 'курсор: текст;' > текст кнопка > тд >
тр >
Таблица >

Приведенный выше код сгенерирует следующий результат:

В следующем разделе мы применим различные стили к элементам HTML.

Стиль «все» элементы

* {
заполнение: 0 ;
прибыль: 0 ;
семейство шрифтов: Arial, Helvetica, без засечек;
}

Все элементы HTML применяются со стилями CSS, которые описаны ниже:

- “ набивка ” недвижимость с “ 0 » не включает пробелы вокруг содержимого элемента.
- “ прибыль ” недвижимость с “ 0 ” value не добавляет пробела за пределами каждого из элементов.
- “ семейство шрифтов ” свойству присваивается значение “ Arial, Helvetica, без засечек ». Список стилей шрифтов приведен для того, чтобы убедиться, что если первый стиль не поддерживается браузером, необходимо применить другие стили.

Стиль «Таблица» Элемент

Таблица {
поле: 0px авто;
граница: 1px сплошная Гейнсборо;
}

Элемент таблицы HTML применяется со свойствами CSS, описанными ниже:

- “ граница ” установлено значение “ 1px сплошной Гейнсборо », который представляет ширину границы, стиль границы и цвет границы соответственно.

“ прибыль ” ведет себя, как указано выше.

Элемент стиля «td»

тд {
выравнивание текста: по центру;
}

Элемент

применяется со свойством « выравнивание текста ' со значением ' центр ». Это выровняет текст столбца по центру.

Элемент стиля «кнопка»

кнопка {
цвет фона: кадетский синий;
отступ: 10px 10px;
цвет: #фффффф;
ширина: 150 пикселей;
}

Элемент кнопки, используемый в приведенном выше HTML-коде, оформлен с использованием новых свойств CSS, которые объясняются ниже:

- “ фоновый цвет ” определяет цвет фона элемента.
- “ набивка ” со значениями, назначенными как “ 10 пикселей 10 пикселей » добавляет пространство 10 пикселей сверху вниз и 10 пикселей слева и справа от элементов элемента.
- “ цвет » регулирует цвет шрифта элемента.
- “ ширина ” — это свойство, которое регулирует ширину элемента.

Приведенный выше код сгенерирует следующий результат:

До сих пор мы обсуждали курсоры, предоставляемые CSS. В следующем разделе в примере будет описано, как создать собственный курсор с помощью CSS.

Пользовательский курсор CSS

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

Посмотрите на пример ниже!

Пример: Как создать собственный курсор с помощью CSS?

В HTML добавьте два элемента div. Один с классом ' круг », а другой с классом « точка ».

HTML

< див учебный класс знак равно 'круг' > див >
< див учебный класс знак равно 'точка' > див >

Давайте перейдем к разделу CSS.

Элемент стиля «тело»

тело {
высота: 100вх;
}

К элементу body файла HTML применяется стиль « рост » для установки высоты элемента.

Стиль div «круг»

.круг {
ширина: 20 пикселей;
высота: 20 пикселей;
граница: 2 пикселя сплошного белого цвета;
радиус границы: 50 % ;
}

Ниже приведено объяснение свойств CSS, которые применяются к элементу div, имеющему класс « круг ”:

- “ ширина » регулирует ширину элемента.
- “ граница ” со значением, указанным как “ 2px сплошной белый ” представляет ширину границы, стиль границы и цвет.
- “ радиус границы » изменяет круглую границу элемента.

Стиль «точка» div

.точка {
ширина: 5 пикселей;
высота: 5 пикселей;
цвет фона: белый;
радиус границы: 50 % ;
}

Элемент div с точкой класса имеет различные свойства, описанные ниже:

- “ фоновый цвет ” определяет цвет фона элемента.
- “ радиус границы » закругляет края элемента.
- Другие свойства будут работать так же, как обсуждалось.

Данный код отобразит на веб-странице следующий курсор:

Мы создали курсор с помощью HTML и CSS. Теперь в следующем разделе написан код JavaScript для добавления необходимой функциональности курсору.

JavaScript

< сценарий >
const cursorCircle = документ.querySelector ( '.круг' ) ;
const cursorPoint = документ.querySelector ( '.точка' ) ;
константа перемещения курсора = ( и ) знак равно > {
const mouseY = e.clientY;
const mouseX = e.clientX;

cursorCircle.style.transform = ` переводить ( ${мышьX} пкс, ${мышьY} пикс. ) ` ;
cursorPoint.style.transform = ` переводить ( ${мышьX} пкс, ${мышьY} пикс. ) ` ;
}
окно.addEventListener ( 'переместить мышь' , двигатьсяКурсор )
сценарий >

Описание приведенного выше кода JavaScript приведено ниже:

- “ <скрипт> ” сочетается с тегом , который используется для написания кода JavaScript.
- “ константа Ключевое слово ” указывает, что ключевое слово const, за которым следует переменная, не может быть переназначено.
- “ document.querySelector('.circle') » возвращает элемент div в виде круга, который соответствует указанному селектору в документе.
- “ document.querySelector(‘.point’) » возвращает элемент div точки, который соответствует указанному селектору в документе.
- “ const moveCursor = (e) => ” эта функция определяет функцию курсора.
- “ e.clientY » возвращает вертикальную координату при срабатывании события мыши.
- “ e.clientX » возвращает горизонтальную координату, когда срабатывает событие мыши.
- “ курсорКруг.стиль.преобразование ” Div круга применяется с преобразованием стиля.
- “ cursorPoint.style.transform ” точка div применяется с преобразованием стиля.
- “ перевести(${мышьX}px, ${мышьY}px) ” значение свойства transform задает горизонтальные и вертикальные координаты.
- “ window.addEventListener («мышь», moveCursor) ” метод слушателя событий будет прослушивать движение мыши. Это часть глобального объекта окна.

После предоставления указанных выше блоков кода курсор автоматически перемещается по экрану, как показано ниже:

Это классно! Мы создали собственный курсор с различными свойствами CSS.

Заключение

CSS « курсор ” имеет множество значений, которые указывают на различные стили курсора. Однако, используя элементы HTML и свойства CSS, мы можем создавать собственные курсоры. Затем реализуется код JavaScript для активации его функциональности. Это исследование продемонстрировало, как создавать собственные курсоры CSS на практическом примере.

Пользовательский курсор CSS

CSS-курсор

Пользовательский курсор CSS

Заключение

Категория

Популярные посты