Question

这是应该发生的事情。

页面加载
1秒钟无效
然后它使元素“闪烁”四次（延迟约600毫秒）
完成！

使用语言

使用CSS，Javascript或jQuery来解决它。它应该适用于常见的浏览器和设备。

闪烁

眨眼我的意思是从一种背景颜色淡化到另一种背景颜色。渐弱时间应该是可以改变的。

小提琴

https://jsfiddle.net/cjkkr5h0/

HTML

<div>Make me blink 4 times on load (600 ms)!</div>

<p>CSS, Javascript or jQuery. Make it simple, make it short. Should work on mobile devices and common browser versions.</p>

CSS

div {
    background: #90a5b7;

    /* NOT SO IMPORTANT */
    padding: 10px;
    color: #fff;
    display: inline-block;
    font-family: Arial;
}

.blink-to {
    background: #2a5b84;
}

如何以最好的方式完成？

Answer 1

你可以尝试这样的事情。 DEMO

CFile::typeBinary

Answer 2

你可以在jquery上做到这一点。这是一个可能的解决方案

 $(document).ready(function(){    
        var timesRun = 0;
        setInterval(function(){
            if(timesRun == 4){
                return;
            }
            timesRun++;

            if($("#blinker").css('display') == 'none' )
                $("#blinker").css('display','block');
            else
                $("#blinker").css('display','none') ;
        }, 600);
    });

其中blinker是你要关闭的标签的id .. 无论如何，我只是通过闪烁你的意思是切换颜色，只需更改if else语句以匹配颜色的比例和你想要切换的颜色。

加载CSS，Javascript或jQuery闪烁元素

2 个答案: