Альтернатива для <blink>

Ответ 1

Нет, нет. Wikipedia имеет хорошую статью об этом и предоставляет альтернативу с использованием JavaScript и CSS: http://en.wikipedia.org/wiki/Blink_element

Ответ 2

.blink_text {

    animation:1s blinker linear infinite;
    -webkit-animation:1s blinker linear infinite;
    -moz-animation:1s blinker linear infinite;

     color: red;
    }

    @-moz-keyframes blinker {  
     0% { opacity: 1.0; }
     50% { opacity: 0.0; }
     100% { opacity: 1.0; }
     }

    @-webkit-keyframes blinker {  
     0% { opacity: 1.0; }
     50% { opacity: 0.0; }
     100% { opacity: 1.0; }
     }

    @keyframes blinker {  
     0% { opacity: 1.0; }
     50% { opacity: 0.0; }
     100% { opacity: 1.0; }
     }

    <span class="blink_text">India Largest portal</span>

Ответ 3

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

Это сказал... вы могли бы эмулировать его с помощью анимации CSS, но если бы я был вами, я бы не стал рисковать анимацией CSS из-за злоупотребления таким образом:)

Ответ 4

Элемент blink отбрасывается браузерами: Firefox поддерживает его до версии 22 и Opera до версии 12.

HTML5 CR, который является первым проектом спецификации, который упоминает blink, объявляет его как "устаревшим", но описывает (в Rendering) его "ожидаемый рендеринг" с правилом

blink { text-decoration: blink; }

и рекомендует заменить этот элемент на использование CSS. На самом деле существует несколько альтернативных способов эмуляции blink в CSS и JavaScript, но упомянутое правило является наиболее простым: значение blink для text-decoration было определено специально, чтобы предоставить эквивалент CSS элементу blink. Однако поддержка для него кажется такой же ограниченной, как и для элемента blink.

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

Ответ 5

Пожалуйста, попробуйте это, и я гарантирую, что он будет работать

  <script type="text/javascript">
  function blink() {
  var blinks = document.getElementsByTagName('blink');
  for (var i = blinks.length - 1; i >= 0; i--) {
  var s = blinks[i];
  s.style.visibility = (s.style.visibility === 'visible') ? 'hidden' : 'visible';
}
window.setTimeout(blink, 1000);
}
if (document.addEventListener) document.addEventListener("DOMContentLoaded", blink, false);
else if (window.addEventListener) window.addEventListener("load", blink, false);
else if (window.attachEvent) window.attachEvent("onload", blink);
else window.onload = blink;

Затем поставьте это ниже:

<blink><center> Your text here </blink></div>

Ответ 6

Мигающий текст только с HTML и CSS

<span class="blinking">I am blinking!!!</span>

А теперь CSS-код

    .blinking{
        animation:blinkingText 0.8s infinite;
    }

    @keyframes blinkingText{
        0%{     color: #000;    }
        49%{    color: transparent; }
        50%{    color: transparent; }
        99%{    color:transparent;  }
        100%{   color: #000;    }
    }

Ответ 7

Если вы хотите снова включить ярлык для своего собственного просмотра, вы можете установить это простое расширение Chrome, которое я написал: https://github.com/etlovett/Blink-Tag-Enabler-Chrome-Extension. Он просто скрывает и показывает все <blink> теги на каждой странице с помощью setInterval.

Ответ 8

Небольшой фрагмент javascript, чтобы имитировать мигание, не нужно css даже

<span id="lastDateBlinker">
    Last Date for Participation : 30th July 2014
</span>

<script type="text/javascript">
    function blinkLastDateSpan() {
        if ($("#lastDateBlinker").css("visibility").toUpperCase() == "HIDDEN") {
            $("#lastDateBlinker").css("visibility", "visible");
            setTimeout(blinkLastDateSpan, 200);
        } else {
            $("#lastDateBlinker").css("visibility", "hidden");
            setTimeout(blinkLastDateSpan, 200);
        }
    }
    blinkLastDateSpan();
</script>

Ответ 9

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

<!doctype>
<html>
    <head>
        <style>
            .blink {color: red}
        </style>
    </head>
    <body>
        <h1>Blink test</h1>
        <p>
            Brazil elected President <span class="blink">Bolsonaro</span> because he 
            was the only candidate who did not promise <span class="blink">free things</span>
            to the population. Previous politicians created an image that would 
            bring many benefits, but in the end, the state has been getting more and 
            more <span class="blink">burdened</span>. Brazil voted for the 
            realistic idea that <span class="blink">there is no free lunch</span>.
        </p>
    </body>
    <script>
    var blink =
        {
            interval_in_miliseconds:
                400,
            on:
                true,
            function_wich_returns_the_elements: 
                [],
            activate:
                function(function_wich_returns_the_elements)
                {
                    this.function_wich_returns_the_elements = function_wich_returns_the_elements;
                    setInterval(blink.change, blink.interval_in_miliseconds);
                },
            change:
                function()
                {   
                    blink.on = !blink.on;
                    var i, elements = [];
                    for (i in blink.function_wich_returns_the_elements)
                    {
                        elements = elements.concat(blink.function_wich_returns_the_elements[i]());
                    }
                    for (i in elements)
                    {
                        if (elements[i])
                        {
                            elements[i].style.opacity = blink.on ? 1 : .2;
                        }
                    }
                }
        };
    blink.activate
    (
        [
            function()
            {
                var 
                    i,
                    node_collection = document.getElementsByClassName('blink'),
                    elements = [];
                for (i = 0; i < node_collection.length; i++)
                {
                    elements.push(node_collection[i]);
                }
                return elements;
            }
        ]
    );
    </script>
</html>

Ответ 10

Вы можете воспользоваться setInterval JavaScript setInterval:

const spanEl = document.querySelector('#spanEl');
var interval = setInterval(function() {
  spanEl.style.visibility = spanEl.style.visibility === "hidden" ? 'visible' : 'hidden';
}, 250);

<span id="spanEl">This text will blink!</span>

Ответ 11

можете использовать это

@keyframes blinkingText
{
    0%{     opacity: 1;    }
    40%{    opacity: 0; }
    60%{    opacity: 0; }
    100%{   opacity: 1;    }
}

.blinking
{
    animation:blinkingText 2s reverse infinite;
}

Ответ 12

Тэг blick устарел, и эффект уже устарел :) Текущие браузеры его больше не поддерживают. В любом случае, если вам нужен эффект мерцания, вы должны использовать JavaScript или CSS-решения.

Решение CSS

blink {
    animation: blinker 0.6s linear infinite;
    color: #1c87c9;
}
@keyframes blinker {  
    50% { opacity: 0; }
}
.blink-one {
    animation: blinker-one 1s linear infinite;
}
@keyframes blinker-one {  
    0% { opacity: 0; }
}
.blink-two {
    animation: blinker-two 1.4s linear infinite;
}
@keyframes blinker-two {  
    100% { opacity: 0; }
}

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h3>
      <blink>Blinking text</blink>
    </h3>
    <span class="blink-one">CSS blinking effect for opacity starting with 0%</span>
    <p class="blink-two">CSS blinking effect for opacity starting with 100%</p>
  </body>
</html>

Ответ 13

Вот код, который заменит тег blink

<p id="blink">This text will blink!</p>
<script>
var blacktime = 1000;
var whitetime = 1000;
//These can be as long as you desire in milliseconds
setTimeout(whiteFunc,blacktime);
function whiteFunc(){
    document.getElementById("blink").style.color = "white";
    setTimeout(blackFunc,whitetime);
}
function blackFunc(){
    document.getElementById("blink").style.color = "black";
    setTimeout(whiteFunc,blacktime);
}
</script>

Ответ 14

Вот веб-компонент, который вам подходит: blink-element.
Вы можете просто обернуть свой контент в <blink-element>.

<blink-element>
    <!-- Blinking content goes here -->
</blink-element>