В html как сделать мигающий курсор
Поля ввода включают в себя input type = «text», textarea, а также любой элемент, имеющий атрибут contenteditable, где этот атрибут заставляет любой элемент вести себя как textarea.
Вы можете установить любое значение цвета CSS на цвете caret-color:
Анимация набора текста на CSS
На этом уроке разберем как можно имитировать ввод текста с клавиатуры с помощью CSS анимации. Эффект печатающегося текста способен оживить вашу веб-страницу, не прилагая особых усилий. Анимация будет запускаться один раз при при загрузке страницы и этого вполне достаточно.
HTML разметка
Создадим разметку из контейнера для текста с классом wrapper и из блока самого текста с классом text.
CSS стили
Выравниваем наш текст по центру и делаем отступ сверху.
.wrapper <
display: flex;
justify-content: center;
margin-top: 30px;
>
Теперь стилизуем сам печатающийся текст. В конце строки для реалистичности поставим курсор. Изобразить курсор можно с помощью рамки. Отобразим только правую сторону рамки border-right. Использование моношириного шрифта не преподнесет никаких сюрпризов, поскольку у данного шрифта одинаковая ширина маленьких и заглавных букв.
.text <
color: white;
font-family: monospace;
font-size: 30px;
white-space: nowrap; /* не переносить текст на новую строку */
overflow: hidden; /* скрываем переполнение контентом */
border-right: 3px solid white; /* рисуем курсор */
>
Создание анимации для курсора
Объявим анимацию через правило @keyframes и создадим три ключевых кадра анимации: первый кадр (0%) — курсор белого цвета, второй кадр (50%) — курсор прозрачного цвета, третий кадр (100%) — курсор белого цвета. В итоге мы получим мигающий курсор.
@keyframes cursor <
0% <
border-color: white;
>
50% <
border-color: transparent;
>
Применим анимацию с названием cursor к тексту. Для этого добавим к стилям новую строку, где cursor (имя анимации), 0.75s (время длительности анимации), step-end (названии функции способа анимации) и infinite (бесконечная анимация).
.text <
.
animation: cursor 0.75s step-end infinite;
>
Создание анимации набора текста
Суть анимации текста состоит в изменении ширины текста от нуля символов до количества символов включая пробелы, самого текста. Напишем новой правило @keyframes, состоящее из одного кадра.
@keyframes printed_text <
from <
width: 0;
>
>
Наш текст состоит из 29 символов. Добавим новой свойство в стили с классом text.
А еще добавим через запятую новую анимацию printed_text, указав в параметрах функции steps количество символов у текста.
.text <
.
animation: cursor 0.75s step-end infinite,
printed_text 5s steps(29);
>
Код класса text целиком.
.text <
width: 29ch;
color: white;
font-family: monospace;
font-size: 30px;
white-space: nowrap; /* не переносить текст на другую строку */
overflow: hidden; /* скрываем переполнение контентом */
border-right: 3px solid white; /* рисуем курсор */
animation: cursor 0.75s step-end infinite,
printed_text 5s steps(29);
>
Как я могу вставить мигающий курсор в div?
Я хочу сделать основной текстовый редактор, используя angularjs (или просто чистый javascript). Идея состоит в том, что у меня будет div, чтобы содержать текст вместо использования textarea . Я хочу, чтобы пользователь мог щелкнуть в любом месте внутри div и отображать мигающий курсор, где они нажимают. Я действительно не знаю, как это сделать. Какие-либо предложения? Кстати, я бы предпочел не использовать contentEditable .
4 ответа
Поскольку вы предпочитаете не использовать contenteditable , вот несколько советов, которые вы могли бы посмотреть, чтобы получить мигающий курсор, вручную:
- Наложите div на элемент холста, получите позицию клика и оставьте линию на холсте в этой позиции.
- Наложение анимированного .gif содержащего мигающую строку в позиции щелчка.
- Используйте анимированный .gif содержащий мигающую строку в качестве фона div, и установите положение фона в зависимости от местоположения клика.
- В приведенных выше двух предложениях вместо .gif вы можете использовать статическое изображение и переключать его.
Вам нужно иметь в виду, что линия должна будет привязываться к ближайшей границе символа, поэтому вы не будете мигать курсором в середине символа. Использование моноширинного шрифта сделало бы это намного проще.
Вам все равно придется писать другие функции текстового поля:
- Текстовые манипуляции.
- Выбор.
- Копирование/вставка
Вы можете сделать div редактируемым, добавив атрибут contentEditable = «true» в элемент div.
Simple blinking cursor animation using CSS
The other day I was feeling a little nerdy (like all the cool kids) and so, I attempted to add this cool-looking blinking cursor at the end of my blog’s tagline like so.
Turns out it’s rather quite easy to implement something like this. In a nutshell, it’s a combination of the ::after pseudo-element and a pinch of CSS animation timing using the steps() function.
If you want to learn how it can be done, read on!
Using the ::after pseudo element
The first and foremost thing is to add a static cursor. And the way to do it is by using the ::after pseudo-element to the element after which you want the cursor.
So, for instance, if you want to place it at the end of a <h2> , you can use the ::after pseudo-element like so.
The result would look like so.
As you can tell, I have used the flexbox in order to make the text and the cursor align properly and have proper spacing between them.
Once that is done, it’s time to animate the cursor.
Animating the cursor
To animate the cursor, first, we need to define a keyframe called cursor-blink that will reduce the opacity of the cursor to 0 when the keyframe is “0%”.
Once done, we can now use this keyframe on the cursor using the animation shorthand like so.
Let’s break this down!
The cursor-blink animation we previously defined will run infinitely at each duration of 1.5 seconds and the animation-timing-function would take care of the animation iterations in form of steps(2) which essentially means it will display the animation iteration along 2 stops along with the entire transition.
The final output
Here’s how the final output looks like once everything is put together.
�� Hi there! I’m Amit. I write articles about all things web development. If you like what I write and want me to continue doing the same, I would like you buy me some coffees. I’d highly appreciate that. Cheers!