72

この<blink>タグは公式の標準ではなく、現在はすべてのブラウザーで完全に放棄されています。

テキストを点滅させる標準に準拠した方法はありますか?

4

14 に答える 14

90 

.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's Largest portal</span>

于 2014-05-30T09:43:43.603 に答える
28

いいえ、ありません。ウィキペディアにはこれに関する素晴らしい記事があり、JavaScript と CSS を使用した代替手段が提供されています: http://en.wikipedia.org/wiki/Blink_element

于 2013-08-07T13:49:43.153 に答える
13

いいえ、HTML にはありません。10 年以上も実装が変更されていなかった要素のサポートを開発者がわざわざ削除することを選択したのには、十分な理由があります。

そうは言っても... CSS アニメーションを使用してエミュレートすることはできますが、もし私があなたなら、この方法で悪用されたために CSS アニメーションが廃止されるリスクはありません :)

于 2013-08-07T13:48:38.853 に答える
4

これを試してみてください。うまくいくことを保証します

  <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>
于 2015-12-12T07:09:40.700 に答える
0

HTML コード

<span class="blinking">Am I blinking?</span>

CSSコード

.blinking{
    animation:blinkingText 1.2s infinite;
}
@keyframes blinkingText{
    0%{     color: #000;    }
    49%{    color: #000; }
    60%{    color: transparent; }
    99%{    color:transparent;  }
    100%{   color: #000;    }
}
<span class="blinking">Am I blinking?</span>

参考：https ://html-online.com/articles/blinking-text-css-animation/

于 2021-11-17T05:52:12.997 に答える
0

以下のソリューションは、複数の要素に同時に適用でき、要素がページに存在しなくなったときにエラーをトリガーしないため、興味深いものです。その秘密は、まばたきの影響を受ける要素を返す必要がある関数をパラメーターとして渡すことと呼ばれることです。次に、この関数は点滅ごとに呼び出されます。以下の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>
于 2019-01-06T00:17:01.973 に答える
0

これを使用できます

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

.blinking
{
    animation:blinkingText 2s reverse infinite;
}
于 2019-04-06T08:10:24.540 に答える
0

まばたきを模倣する小さな 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>
于 2014-06-30T16:55:55.353 に答える