使用CSS / JS的动画发光边框？ [英] Animated glowing border using CSS/ JS?

问题描述

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

我想创建发光的边框，其光线连续变亮和衰减（使用3个属性以实现这种效果 - 边框，框阴影，插入框阴影）。如何这样做？

请注意，我不是在说使用hover或active状态。

解决方案

如果这必须是一个JS解决方案，

 ＃
 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属性（转换，框阴影等）。

Is it possible to use JS to automatically and continuously change a particular CSS property?

I want to create glowing border whose glow continuously brightens and dampens (using 3 properties to achieve this effect - border, box shadow, inset box shadow). How can I do so?

Please note that I am not talking about using "hover" or "active" states. Also I want it to work in all browsers, if possible.

解决方案

If this has to be a JS solution, the following will work for you.

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

And then using jQuery:

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

You can see a jsFiddle here. While this is achievable using JS, you could also use CSS3 animations.

Also, you won't be able to get it to work in all browsers, as not all of them support the CSS properties that you mentioned (transitions, box shadow, etc.).

这篇关于使用CSS / JS的动画发光边框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！