Учимся делать мигающий текст с помощью html тега blink

[NevesOma]

Обновление: HTML-тег <blink>, который раньше использовался для создания мигающего текста, сегодня устарел и современными браузерами больше не поддерживается. Свойство text-decoration: blink также практически не работает.

Если нужно сделать мигающий текст в HTML сейчас, лучше использовать CSS-анимацию через @keyframes. Актуальный способ с готовыми примерами добавлен ниже в теме.
Учимся делать мигающий текст с помощью html тега blink

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

Но всё же это не лучший вариант привлечения внимания, так как некоторых посетителей это может "отпугнуть".

Создаётся мигающий текст, при помощи тега text-decoration с атрибутом blink

<p style="text-decoration:blink; color:#009933;">Любой текст, который должен мигать</p>

Пример мигающего текста

Этот вариант не самый лучший, так как в некоторых браузерах (Например, в Google Chrome) текст, просто-напросто не мигает и тут на помощь нам приходит jQuery.

Код будет следующим.
В начале документа подключаем JS код:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

-------

<script type="text/javascript">

$(function(){

    $("#blinkingText").hide();

    setTimeout(function(){$("#blinkingText").show();setInterval(function(){$("#blinkingText").toggle();},500)},3000);

});

</script>

Теперь, чтобы вывести текст добавляем в тело документа:

<p id="blinkingText">Любой текст который должен мигать</p>

 

[Fillthewave]

Познавательно

 

[sven]

Познавательно

поднял тему? или интерес???

 

[qwertyqwerty]

поднял тему? или интерес???

накрутка сообщений наверно, человек только зарегистрировался

 

[djon]

Как сделать мигающий текст в HTML сейчас

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

Простой пример мигающего текста через CSS

HTML:

Этот текст мигает

CSS:

.blink-text {
animation: blink 1s infinite;
}

@keyframes blink {
0%, 100% {
opacity: 1;
}

50% {
    opacity: 0;
}

}

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

Как изменить скорость мигания текста

За скорость отвечает значение:

animation: blink 1s infinite;

Например, более быстрое мигание:

animation: blink 0.5s infinite;

Более медленное:

animation: blink 2s infinite;

Чем меньше время, тем быстрее будет происходить анимация.

Как сделать резкое мигание, похожее на старый тег Blink

Если плавное исчезновение не нужно и хочется получить эффект, больше похожий на старый HTML , можно использовать steps():

.blink-text {
animation: blink 1s steps(2, start) infinite;
}

@keyframes blink {
50% {
visibility: hidden;
}
}

Так текст будет именно включаться и выключаться, а не постепенно становиться прозрачным.

Мигающая ссылка в HTML

Таким же способом можно сделать мигающей ссылку:

Перейти на Hardok

.blink-link {
animation: blink 1s infinite;
}

@keyframes blink {
50% {
opacity: 0;
}
}

Мигающая кнопка

CSS-анимацию можно применить и к кнопке:

Нажми меня

.blink-button {
animation: blink 1.2s infinite;
}

@keyframes blink {
50% {
opacity: 0.3;
}
}

Почему больше не работает?

был нестандартным HTML-элементом и использовался в старых браузерах для автоматического мигания текста. Со временем поддержку этого тега убрали.

Поэтому такой старый код:

Мигающий текст

в современных Chrome, Firefox, Edge и других браузерах ожидаемого эффекта уже не даст.

То же относится к старому варианту:

text-decoration: blink;

Современная замена — CSS-анимация с @keyframes.

Нужен ли JavaScript или jQuery?

Для простого мигания текста — нет. Подключать jQuery только ради такого эффекта сейчас нет смысла. HTML и CSS вполне достаточно.

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

Итого

Если нашли старый пример с тегом и он не работает — проблема не в вашем коде. Сам тег устарел.

Для современных сайтов используйте CSS:

.blink-text {
animation: blink 1s infinite;
}

@keyframes blink {
50% {
opacity: 0;
}
}

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