我有一個閃爍的方框，如何為它添加漸變或使其更容易編程？

Question

我試圖弄清楚如何顯示一個閃爍的框，並且由於我在網上找不到真正的解決方案，所以我在擺弄一些。

我提出了以下建議，總體來說效果很好。 我的問題很簡單：a）是否有更簡單的方法可以做到這一點，b）我是否可以通過按梯度增加/減少的方式對其進行編程，而不必像這樣編寫大量的類和東西。

實際操作中請參見以下代碼： http : //jsfiddle.net/ZUJ5b/7/

HTML

<div id="test" class="test">Hello</div>

jQuery的

$(document).ready(function () {
    setInterval(blink, 75);
});

function blink() {
    if ($('#test').hasClass("test")) {
        $("#test").removeClass('test').addClass('test1');
    } else if($('#test').hasClass("test1")) {
        $("#test").removeClass('test1').addClass('test2');
    } else if($('#test').hasClass("test2")) {
        $("#test").removeClass('test2').addClass('test3');
    } else if($('#test').hasClass("test3")) {
        $("#test").removeClass('test3').addClass('test5');
    } else if($('#test').hasClass("test4")) {
        $("#test").removeClass('test4').addClass('test5');
    } else if($('#test').hasClass("test5")) {
        $("#test").removeClass('test5').addClass('test6');
    } else if($('#test').hasClass("test6")) {
        $("#test").removeClass('test6').addClass('test7');
    } else {
        $("#test").removeClass('test7').addClass('test');
    }
}

CSS

.test {
    padding: 20px;
    width: 100px;
    border: 1px #ED0 outset;
    box-shadow: 0px 0px 6px 1px #FE4;
    -moz-box-shadow: 0px 0px 6px 1px #FE4;
    -webkit-box-shadow: 0px 0px 6px 1px #FE4;
}
.test1 {
    padding: 20px;
    width: 100px;
    border: 1px #EED000 outset;
    box-shadow: 0px 0px 6px 1px #FFE544;
    -moz-box-shadow: 0px 0px 6px 1px #FFE544;
    -webkit-box-shadow: 0px 0px 6px 1px #FFE544;
}
.test2 {
    padding: 20px;
    width: 100px;
    border: 1px #EEC300 outset;
    box-shadow: 0px 0px 7px 2px #FFDD44;
    -moz-box-shadow: 0px 0px 7px 2px #FFDD44;
    -webkit-box-shadow: 0px 0px 7px 2px #FFDD44;
}
.test3 {
    padding: 20px;
    width: 100px;
    border: 1px #EEB600 outset;
    box-shadow: 0px 0px 7px 2px #FFD444;
    -moz-box-shadow: 0px 0px 7px 2px #FFD444;
    -webkit-box-shadow: 0px 0px 7px 2px #FFD444;
}
.test4 {
    padding: 20px;
    width: 100px;
    border: 1px #EA0 outset;
    box-shadow: 0px 0px 8px 3px #FFCC44;
    -moz-box-shadow: 0px 0px 8px 3px #FFCC44;
    -webkit-box-shadow: 0px 0px 8px 3px #FFCC44;
}
.test5 {
    padding: 20px;
    width: 100px;
    border: 1px #EEB600 outset;
    box-shadow: 0px 0px 7px 2px #FFD444;
    -moz-box-shadow: 0px 0px 7px 2px #FFD444;
    -webkit-box-shadow: 0px 0px 7px 2px #FFD444;
}
.test6 {
    padding: 20px;
    width: 100px;
    border: 1px #EEC300 outset;
    box-shadow: 0px 0px 7px 2px #FFDD44;
    -moz-box-shadow: 0px 0px 7px 2px #FFDD44;
    -webkit-box-shadow: 0px 0px 7px 2px #FFDD44;
}
.test7 {
    padding: 20px;
    width: 100px;
    border: 1px #EED000 outset;
    box-shadow: 0px 0px 6px 1px #FFE544;
    -moz-box-shadow: 0px 0px 3px 1px #FFE544;
    -webkit-box-shadow: 0px 0px 3px 1px #FFE544;
}

Answer 1

哇！ 你很敬業！ 使用CSS制作動畫的方法要簡單得多。 查看CSS過渡（ https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions ）

Answer 2

使用CSS過渡非常簡單（但僅適用於新版本的瀏覽器）

這是演示小提琴

只需將過渡屬性添加到CSS類中，然后在其中定義要在其上進行過渡的屬性（在您的情況下為邊框陰影），並定義要進行過渡的時間。

    transition: box-shadow 1s;