Мигание — простой и при этом заметный визуальный эффект. Чаще всего используется для имитации текстового курсора или привлечения внимания к какому-то элементу (например, «новинка», «онлайн», и т.д.).
Это статья из цикла заметок по CSS анимации и эффектам.
Что будем делать
Сделаем мигающий курсор — вертикальную палочку, как в текстовом редакторе. Эффект мигания создаётся с помощью анимации, которая циклически меняет прозрачность (opacity).
Демка
Введите ваше имя:
Код на чистом CSS / HTML
|
1 |
<p>Введите ваше имя<span class="blinking-cursor"></span></p> |
Стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.blinking-cursor { display: inline-block; margin-left: 5px; width: 5px; height: 1em; background-color: black; animation: css-animation-blink 1s step-start infinite; } @keyframes css-animation-blink { 50% { opacity: 0; } } |
Как это работает:
display: inline-block;— позволяет задать размеры «курсора».widthиheight— задают форму. Обычно это узкая вертикальная полоска высотой с текст.background-color— цвет курсора.animation: blink 1s step-start infinite;— включает бесконечную анимацию:1s— продолжительность одного цикла;step-start— делает мигание более «цифровым» (без плавности);infinite— зацикливает анимацию.- В
@keyframesна середине (50%) анимации элемент становится прозрачным, а затем снова появляется.
Вариации:
- Измените
opacityнаvisibility: hidden;иvisible— это предотвратит клики по «невидимому» элементу. - Используйте эффект мигания на иконках, значках, бейджах и т.п.
- Можно комбинировать мигание с
colorилиbox-shadowдля ещё большего привлечения внимания.