使用CSS/JS制作的发光边框动画

为纯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;
}

如果这必须是一个JS解决方案，那么以下内容将适用于您。

CSS：

#myGlower {
    background-color: #ccc;
    border: 1px solid transparent;    
    -webkit-transition: border 0.1s linear, box-shadow 0.1s linear;
       -moz-transition: border 0.1s linear, box-shadow 0.1s linear;
            transition: border 0.1s linear, box-shadow 0.1s linear;
}
#myGlower.active {
    border-color: blue;
    -webkit-box-shadow: 0 0 5px blue;
       -moz-box-shadow: 0 0 5px blue;
            box-shadow: 0 0 5px blue;
}

然后使用jQuery:

$(function() {  
    var glower = $('#myGlower');
    window.setInterval(function() {  
        glower.toggleClass('active');
    }, 1000);
});

您可以在此处看到jsFiddle。虽然使用JS可以实现这一点，但您也可以使用CSS3动画。

此外，您将无法在所有浏览器中使用它，因为并非所有浏览器都支持您提到的CSS属性（转换、框阴影等）。

我想从两个方面修改BenM接受的答案。第一个是为像我这样期望JS而不是JQUery的人提供一个纯JavaScript的答案。第二种方法是提供更平滑的动画辉光，而不会出现示例中的急动。

要使动画更平滑，需要进行两个更改：边界应该是0px，而不是1px，并且过渡应该在两个类上，即活动类和默认类（我已将其指定为"被动"）。此外，使用扩散大小的值和较长的过渡时间会产生更微妙的效果。我认为没有必要在边界上进行过渡。

#myGlower.passive 
{
    border: 0px solid transparent;    
    -webkit-transition: box-shadow 2s linear;
    -moz-transition: box-shadow 2s linear;
    transition: box-shadow 2s linear;
}
#myGlower.active 
{
    border-color: blue;
    -webkit-box-shadow: 0 0 10px 10px blue;
    -moz-box-shadow: 0 0 10px 1px blue;
    box-shadow: 0 0 10px 10px blue;
    /* in order: x offset, y offset, [blur size], [spread size], color */
    -webkit-transition: box-shadow 2s linear;
    -moz-transition: box-shadow 2s linear;
    transition: box-shadow 2s linear;
}

对于我的动画，我想允许用户将动画设置为在设定的循环次数后停止，或者通过用户干预独立地停止。我还希望动画在非辉光状态下停止。以下代码实现了这一点，并且可以进行修改以满足个人要求。

    var done = false;       // flag to prevent resumption
    var timer;              // the setTimeout function
    var i = 0;              // counter - must be outside startMe()
    var limit = 0;          // number of times to repeat
    // call to start the animation
    function superStart(lim)
    {
        limit = lim;       // must set before startMe()
        startMe();
    }
    function startMe()
    {
        var glower = document.getElementById("myGlower");
        var currentClass = glower.className;
        if(done == false)
        {
            if(currentClass == "passive")
            {
                glower.className = "active";
            }
            else
            {
                glower.className = "passive";               
            }
            i++;
            timer = setTimeout(startMe, 1000);
            if(i >= limit)
            {
                stopMe();
            }
        }
        else
        {
            glower.className = "passive";   // finish with glow off
        }
    }
    // separate function to also allow user action to terminate
    function stopMe()
    {
        clearTimeout(timer);
        done = true;
        startMe();           // to start final cycle finishing in passive state
    }

实际上，我不确定clearTimeout（）是否是必需的。（没有它就可以工作。）

使用JQuery和CSS动画，

一个CSS动画用于第一次悬停时的增加，一个用于不断变化的光晕，另一个用于鼠标离开框时的减少。

（如果你不想使用插件，你可以使用其他方法。）

$('div.div').hover(
  function() {
    $(this).addClass('increase');
    setTimeout(function(){ 
      $('div.div').removeClass("increase");
      $('div.div').addClass("glow");
    }, 1000);
  },
  function() {
    $(this).removeClass('increase');
    $(this).removeClass('glow');
    $(this).addClass('fade');
    setTimeout(function(){ 
      $('div.div').removeClass("fade");
    }, 1000);
  }
);

html {
  background-color: black;
}
div {
  background-color: white;
  height: 100px;
  width: 100px;
  margin: auto;
}
.increase {
  animation: increase 1s ease-in-out;
} 
.glow {
  animation: glow 5s ease-in-out 0s infinite;
} 
.fade {
  animation: fade 1s ease-in-out;
}
@keyframes increase {
  to { box-shadow: 0 0 40px rgba(81, 203, 238, 1); }
}
@keyframes glow {
  0% { box-shadow: 0 0 40px rgba(81, 203, 238, 1); }
  25% { box-shadow: 0 0 30px rgba(81, 203, 238, 1); }
  25%, 50% { box-shadow: 0 0 40px rgba(81, 203, 238, 1); }
  50%, 75% { box-shadow: 0 0 30px rgba(81, 203, 238, 1); }
  75%, 100% { box-shadow: 0 0 40px rgba(81, 203, 238, 1); }
}
@keyframes fade {
  from { box-shadow: 0 0 35px rgba(81, 203, 238, 1); }
  to { box-shadow: 0 0 0px rgba(81, 203, 238, 1); }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="div"></div>

PS，当我写这篇文章时，我发现了如何设计代码段"控制台"的样式：

$('div').hover();

div {
  background-color: blue;
  color: red;
  height: 100px;
  width: 100px;
  margin: auto;
  outline: none;
  border: 3px solid black;;
}

如果您不想使用Jquery。

纯Javascript：

var i = 0;
var glow = document.getElementById('myGlower');
setInternval(function(){
        if(i == 0)
            glow.setAttribute('class','myGlower');
    else
            glow.removeAttribute('class');
},1000);

工作示例：http://jsfiddle.net/7xvGp/1215/