Question

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

我想创建发光的边框，其发光持续变亮和褪色（使用3个属性来实现此效果 - 边框，框阴影，插入框阴影）。我怎么能这样做？

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

Answer 1

如果这必须是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 here。虽然这可以使用JS实现，但您也可以使用CSS3动画。

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

Answer 2

为仅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 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 。

Pure 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动画，一个用于改变发光的CSS动画，另一个用于鼠标离开框时减少的动画。

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

＆＃13;

$('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);
  }
);

＆＃13;

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

＆＃13;

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

＆＃13;

PS，我发现了如何设计代码片段＆＃39; console＆＃39;当我写这篇文章的时候：

＆＃13;

$('div').hover();

＆＃13;

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

＆＃13;

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

5 个答案: