javascript - 使用 CSS/JS 的动画发光边框？

Question

是否可以使用 JS 来自动持续更改特定的 CSS 属性？

我想创建发光边框，其发光不断变亮和变暗(使用 3 个属性来实现此效果 - 边框、框阴影、嵌入框阴影)。我该怎么做？

请注意，我不是在谈论使用“悬停”或“事件”状态。 如果可能的话，我还希望它能在所有浏览器中运行。

Answer 1

为仅 CSS 解决方案操纵上述答案

@-webkit-keyframes glow {
    to {
         border-color: #69c800;
    -webkit-box-shadow: 0 0 5px #69c800;
       -moz-box-shadow: 0 0 5px #69c800;
            box-shadow: 0 0 5px #69c800;
    }
}

.myGlower {
    background-color: #ccc;
    border: 1px solid transparent;
    -webkit-animation: glow 1.0s infinite alternate;  
     -webkit-transition: border 1.0s linear, box-shadow 1.0s linear;
       -moz-transition: border 1.0s linear, box-shadow 1.0s linear;
            transition: border 1.0s linear, box-shadow 1.0s linear;
    width: 100px;
    height: 100px;
    margin: 50px;
}