Css мигающий текст: Мигающий текст | HTML/CSS — Примеры

226 просмотров

Мигающий текст в CSS — Мигающий заголовок h2, h3, h4 и абзац P в CSS

В этом уроке мы попытаемся узнать о следующем;

1. Мигающий заголовок в CSS
2. Мигающий абзац в CSS

Мигающий заголовок в CSS

<голова> <стиль> h2{ анимация: blinkingText 0,1 с бесконечно; } @ключевые кадры blinkingText{ 0%{ цвет: красный; } 40%{ цвет: оранжевый; } 60%{ цвет: розовый; } 90%{цвет:прозрачный; } 100%{ цвет: зеленый; } }

T4TUTorials.

Особая благодарность всем вам.

Мигающий абзац в CSS

<голова> <стиль> п{ анимация: blinkingText 0,1 с бесконечно; } @ключевые кадры blinkingText{ 0%{ цвет: красный; } 40%{ цвет: оранжевый; } 60%{ цвет: розовый; } 90%{цвет:прозрачный; } 100%{ цвет: зеленый; } } <тело>

T4TUTorials.

Особая благодарность всем вам.

Проф. Фазал Рехман Шамиль

Как создать мигающий текст на веб-странице с помощью CSS

Как создать мигающий текст на веб-странице с помощью CSS

• Понедельник, 21 марта 2022 г.
• Навин Кохли

• CSS

Я занимаюсь проектированием и разработкой веб-приложений и мобильных приложений, которые требуют от пользователей выполнения действий в течение фиксированного периода времени. Заявка типа аукциона является прекрасным примером, когда участник торгов должен убедиться, что он или она размещает ставку до того, как истечет время. Обычно в таких приложениях у вас есть часы обратного отсчета, чтобы пользователь знал, что время идет. В какой-то момент обратный отсчет достигнет точки, когда вы хотите предупредить пользователя о том, что осталось очень мало времени. Один из способов, которыми приложения уведомляют пользователей, — это мигание времени для пользователя.

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

.Таймер обратного отсчета {
    цвет фона: белый;
    черный цвет;
    анимация: flash_time 1,0 с бесконечно;
}
@-webkit-ключевые кадры flash_time {
    от {
        черный цвет;
    }
    к {
        красный цвет;
    }
}
@ключевые кадры flash_time {
    от {
        черный цвет;
    }
    к {
        красный цвет;
    }
}
 
05:00:00
 
 

Позвольте мне привести этот фрагмент HTML и CSS, чтобы вы могли понять, что происходит. Простой способ отображения мигающего текста — изменение цвета текста с одного значения на другое. Это называется переходом свойства цвета элемента из одного состояния в другое. Это определено в правиле @keyframes at. Это правило сообщает CSS, что цвет текста меняется с черного (при 0%) на красный (при 100%). Вы можете использовать другие цвета в диапазоне от 0% до 100% состояния анимации. Но для простой анимации все, что мне нужно, это переключение между двумя цветами. Вы должны указать имя этого @keyframes at-rule. Я назвал его flash_time . Это имя, которое вы будете использовать в своем классе CSS, управляющем поведением рендеринга текста. Я определил класс CSS .countdown_timer , который определяет поведение отображения текста. Внутри этого класса я использовал свойство анимации . Там вы можете видеть, что я указал имя at-rule. Вы можете прочитать свойство use animation как «для элемента, использующего класс CSS . countdown_timer , анимируйте его с помощью правила flash_time at-rule. Анимируйте элемент каждые 1,0 с и продолжайте делать это бесконечно.

Это очень простой и элегантный способ создать мигающий текст на вашей веб-странице с помощью CSS, а не JavaScript.

Связанные элементы

Как создать мигающий текст на веб-странице с помощью CSS

Установить фокус на текстовое поле при загрузке страницы

Как разместить веб-сайт из дома

Поиск

Последние сообщения

Запрос не поддерживает версию API

Как завершить Ukouh Shrine

Параметр «помощник» тега не должен иметь C# в области объявления атрибутов элемента с помощью драйвера .Net

Популярные сообщения

Всплывающее окно с предупреждением и подтверждением с использованием BootBox в AngularJS

Групповая гистограмма и линейная диаграмма AngularJS с использованием D3

Как заблокировать и разблокировать учетную запись в поставщике удостоверений Asp.