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

Answer 2

如果这必须是 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 属性（过渡、框阴影等）。

Answer 3

我想在两个方面修改 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()。（没有它也可以工作。）

Answer 4

如果您不想使用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/

Answer 5

使用 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;;
}