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

Question 1

тег никогда не был официальным стандартом и теперь полностью отказывается всеми браузерами.

Существует ли стандарты совместимый способ заставить текст мигнуть?

Question 2

Мигающий текст с 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;    }
    }

Question 3

Question 4

Решение ниже интересно, потому что оно может быть применено через несколько элементов одновременно и не инициировало ошибку, когда элемент больше не существует на странице. Секрет - то, что это называют передающим в качестве параметра функция, в которой необходимо возвратить элементы, Вы хотите быть затронутыми миганием. Затем эта функция призвана обратно с каждым миганием. Файл 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>

Question 5

Вы могли использовать в своих интересах 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>

Question 6

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

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

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

Question 7

Question 8

тег blick удерживается от использования, и эффект довольно стар :) Текущие браузеры больше не поддерживают его. Так или иначе при необходимости в мигающем эффекте необходимо использовать решения JavaScript или 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>

CSS: Тег мигания HTML

Faridul Khan · Answer 1 · 1 November 2019 в 12:04