Javascript 我有一个闪烁框，我如何才能添加一个梯度到这个或程序更容易？

我试图弄清楚如何得到一个闪烁的盒子，但由于我在网上没有找到真正的解决方案，所以我有点无所事事

我提出了以下建议，总体来说效果不错。我的问题只是a）是否有一种更简单的方法来实现这一点，以及b）如果我可以用一种方式来编程，使它按梯度增加/减少，而不是我必须编程这么多的类和类似的东西

请参见此操作代码：

html

CSS

---

哇！你太专注了！使用css制作动画有很多更简单的方法。查看CSS转换（）

哇！你太专注了！使用css制作动画有很多更简单的方法。查看CSS转换（）

使用CSS转换非常简单（但仅适用于浏览器的新版本）

只需在css类中添加一个transition属性，并在该属性中定义要将transition放在哪个属性上（在您的示例中为border shadow），还可以定义要进行转换的时间

    transition: box-shadow 1s;

---

css转换非常简单（但仅适用于浏览器的新版本）

只需在css类中添加一个transition属性，并在该属性中定义要将transition放在哪个属性上（在您的示例中为border shadow），还可以定义要进行转换的时间

    transition: box-shadow 1s;

---

请参阅@positLabs answer以获取IE10+答案，只是想对类的使用进行评论：您可以通过使用一个（持久的）类（如

.test{/*padding，width，border*/}

和一个动态类

.testN{border color，（.prefix-）box shadow*/}

进行分解，这样您就可以在一个地方修改以前的值（同时也节省了一些字节的下载，但还是gzip）请看@positLabs answer以获得IE10+答案，只是想评论一下您对类的使用：您可以通过使用一个（持久的）类来进行分解，比如

.test{/*padding，width，border*/}

和一个动态类

.testN{border color，（-prefix-）box shadow*/}

这样你就可以在一个地方修改以前的值（也可以节省一些字节的下载，但还是很好的）。谢谢你的提琴：）谢谢你的提琴：）谢谢你的指南，非常有用。谢谢你的指南，非常有用。

.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;
}

    transition: box-shadow 1s;