Как сделать мигающий курсор в css

Добавил пользователь Alex
Обновлено: 05.10.2024

Он мигает, но мигает только в "одном направлении". Я имею в виду, он только исчезает, а затем снова появляется с opacity: 1.0 , затем снова исчезает, появляется снова и так далее.

Я бы хотел, чтобы оно исчезло, а затем снова "поднялось" от этого исчезновения до opacity: 1.0 . Это возможно?

ОТВЕТЫ

Ответ 1

Сначала вы устанавливаете opacity: 1; , а затем заканчиваете его на 0 , поэтому он начинается с 0% и заканчивается на 100% , поэтому вместо этого просто установите непрозрачность на 0 в 50% , а остальное займет заботиться о себе.

Ответ 2

Используйте alternate значение animation-direction (и вам не нужно добавлять любые кефрамы таким образом).

alternate

Анимация должна менять направление каждого цикла. При воспроизведении в обратном направлении шаги анимации выполняются назад. Кроме того, функции синхронизации также отменены; например, легкость в анимации заменяется анимацией облегчения при воспроизведении в обратном порядке. Счет для определения, является ли он четной или нечетной итерацией, начинается с единицы.

CSS

Я удалил ключевой кадр from . Если он отсутствует, он генерируется из значения, которое вы установили для анимированного свойства ( opacity в этом случае) в элементе, или если вы его не установили (и в этом случае у вас его нет), из значение по умолчанию (которое 1 для opacity ).

И, пожалуйста, не используйте только версию WebKit. Добавьте без префикса после него. Если вы просто хотите написать меньше кода, используйте сокращенную версию.

Ответ 3

Лучший способ получить чистое мигание "100% включено, 100% скидка", как старый это так:

Ответ 4

Альтернативно, если вы не хотите постепенного перехода между show и hide (например, мигающий текстовый курсор), вы можете использовать что-то вроде:

Каждый 1s .cursor будет идти от visible до hidden .

Если CSS-анимация не поддерживается (например, в некоторых версиях Safari), вы можете отказаться от этого простого интервала JS:

Этот простой JavaScript на самом деле очень быстрый и во многих случаях даже может быть лучшим дефолтом, чем CSS. Стоит отметить, что много вызовов DOM, которые делают анимацию JS медленной (например, JQuery $.animate()).

Кроме того, второе преимущество заключается в том, что если вы добавите элементы .cursor позже, они будут по-прежнему анимироваться точно в то же время, что и другие .cursor , поскольку состояние является общим, это невозможно с CSS, насколько мне известно.

Ответ 5

Я не знаю, почему, но анимация только свойства visibility не работает ни в одном браузере.

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

Ответ 6

Ответ 7

Изменить продолжительность и непрозрачность.

Ответ 8

Поздно, но хотел добавить новый с большим количеством ключевых кадров. вот пример на CodePen, так как была проблема со встроенными фрагментами кода:

Ответ 9

Ответ 10

Это работает для меня, используя class= blink для соответствующих элементов

Я работаю над веб-сайтом (встроенным в HTML/CSS), в котором я хочу переместить мигающий курсор вправо, чтобы он не был вверху значка.

Фрагменты HTML и CSS, которые я использовал для того, чтобы сделать значок поиска:

Постановка Задачи:

Мне интересно, какие изменения я должен внести в HTML / CSS, чтобы я мог переместить мигающий курсор немного вправо, чтобы значок был полон видимый.

В этот момент мигающий курсор находится по всему значку, как показано на скриншоте:

Такие же образы может приобретать курсор мыши и при работе в браузере при просмотре различных веб страниц. Это возможно благодаря каскадным таблицам стилей, которые предоставляют нам такую замечательную возможность как изменение курсора мыши при наведении его на элементы html страницы.

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

Если посмотреть спецификацию css, то вы заметите, что возможных значений у атрибута cursor довольно много:

Большинство значений на практике применяется довольно редко. По умолчанию для свойста cursor применяется значение auto. В этом случае браузер отображает курсор по умолчанию для текущего элемента. Например, при наведении на ссылку курсор приобретает форму руки, в тексте показывается обычный текстовый курсор, а на пустых местах простая стрелочка.

Значение	Вид	Пример
default		P
none	P
context-menu		P
help		P
pointer		P
progress		P
wait		P
cell		P
crosshair		P
text		P
vertical-text		P
alias		P
copy		P
move		P
no-drop		P
not-allowed		P
e-resize		P
n-resize		P
ne-resize		P
nw-resize		P
s-resize		P
se-resize		P
sw-resize		P
w-resize		P
ew-resize		P
ns-resize		P
nesw-resize		P
nwse-resize		P
col-resize	P
row-resize	P
all-scroll		P

Некоторые значения для css правила cursor перечисленные выше могут не работать в различных браузерах. Особенно часто проблемы возникают с Оперой, иногда что то может не работать в браузерах Mozila Firefox и Chrome. Установленный по умолчанию в операционной системе Windows браузер Internet Explorer поддерживает все значения.

С помощью правила cursor также можно задать свой собственный курсор, задав путь к соответствующей картинке. Расширение файла картинки с курсом обычно бывает .cur. Кроме формата CUR Internet Explorer в качестве формата файла курсора поддерживает еще и формат ANI. А Firefox, Chrome и Safari кроме CUR поддерживают еще форматы PNG, GIF и JPG.

При указании своего собственного курсора синтаксис правила немного меняется. Через запятую перечисляется одно или несколько значений url, а последним значением обязательно должно быть одно из ключевых слов:

cursor: url ('адрес картинки 1'), url ('адрес картинки 2'), .

При таком стилевом правиле браузер сначала попытается открыть первый файл с курсором, а если открыть его не по каким-либо причинам не удается, перейдет к следующему файлу и так далее. Кстати, для этого абзаца я настроил нестандартный курсор. Поэтому при наведении на него мышкой, если ваш браузер поддерживает формат файла, курсор будет меняться. Чтобы достигнуть такого эффекта достаточно такой записи:

Вообще CSS правило Cursor веб-мастера применяю довольно редко, чтобы не вводить пользователя в заблуждение. Прежде чем переделать вид курсора, определите, будет ли это изменение к месту. Ведь, допустим, что может подумать пользователь, если вместо традиционной руки, появляющейся при наведении на ссылку, возникнет что-то другое.

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

Я работаю над веб-сайтом, на котором я хочу убрать мигающий курсор в фокусе.

Фрагменты HTML-кодов, которые я использовал для создания формы поиска ввода:

HTML:

Постановка задачи:

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

Читайте также: