javascript 使用 CSS/JS 的动画发光边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15008931/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Animated glowing border using CSS/ JS?
提问by Debojyoti Ghosh
Is it possible to use JS to automatically and continuously change a particular CSS property?
是否可以使用 JS 自动连续更改特定的 CSS 属性？
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?
我想创建发光边框，其发光持续变亮和减弱（使用 3 个属性来实现此效果 - 边框、框阴影、插入框阴影）。我该怎么做？
Please note that I am not talking about using "hover" or "active" states. Also I want it to work in all browsers, if possible.
请注意，我不是在谈论使用“悬停”或“活动”状态。如果可能的话，我也希望它在所有浏览器中都能工作。
回答by hariszaman
Manipulating the above answer for CSS only solution
为仅 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;
}
回答by BenM
If this has to be a JS solution, the following will work for you.
如果这必须是一个 JS 解决方案，以下内容对您有用。
CSS:
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:
然后使用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.
你可以在这里看到一个jsFiddle。虽然这可以使用 JS 实现，但您也可以使用 CSS3 动画。
Also, you won't be able to get it to work in allbrowsers, as not all of them support the CSS properties that you mentioned (transitions, box shadow, etc.).
此外，您将无法在所有浏览器中使用它，因为并非所有浏览器都支持您提到的 CSS 属性（过渡、框阴影等）。
回答by David
I'd like to amend BenM's accepted answer in two respects. The first is to provide a pure JavaScript answer for those like myself who expected JS rather than JQUery from the question. The second is to provide a smoother animated glow, without the jerks in the example.
我想在两个方面修改 BenM 接受的答案。第一个是为像我这样期望从问题中得到 JS 而不是 JQUEry 的人提供纯 JavaScript 答案。第二个是提供更平滑的动画发光，没有示例中的抖动。
Two changes are need for a smoother animation: the border should be 0px, not 1px, and the transition should be on both classes, active and default (I've specified it as "passive"). In addition, using a value for spread size and a longer time for the transition gives a more subtle effect. I don't see any need to do a transition on the border.
更流畅的动画需要两个更改：边框应该是 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;
}
For my animation I wanted to allow the user to set the animation to stop after a set number of cycles, or independently by user intervention. I also wanted the animation to stop in the non-glow state. The following code achieved that and can be modified to suit individual requirements.
对于我的动画，我希望允许用户将动画设置为在设定的循环次数后停止，或者通过用户干预独立进行。我还希望动画停止在非发光状态。以下代码实现了这一点，并且可以进行修改以满足个人需求。
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
}
I'm not actually sure if the clearTimeout() is required. (Works without it.)
我实际上不确定是否需要 clearTimeout()。（没有它也能工作。）
回答by Enalds
If you don't want to use Jquery.
如果您不想使用Jquery。
Pure Javascript:
纯Javascript：
var i = 0;
var glow = document.getElementById('myGlower');
setInternval(function(){
if(i == 0)
glow.setAttribute('class','myGlower');
else
glow.removeAttribute('class');
},1000);
Working Example: http://jsfiddle.net/7xvGp/1215/
回答by James
Using JQuery and CSS animation,
使用 JQuery 和 CSS 动画，
One CSS animation for the increase when you first hover, one for the changing glow, and one for the decrease when the mouse leaves the box.
第一次悬停时增加的 CSS 动画，变化的发光，以及鼠标离开框时减少的 CSS 动画。
(If you don't want to use the plugin, you can use other methods.)
（如果你不想使用插件，你可以使用其他方法。）
$('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, I found out how to style the snippet 'console' when I was writing this:
PS，我在写这篇文章时发现了如何设置代码段“控制台”的样式：
$('div').hover();div {
background-color: blue;
color: red;
height: 100px;
width: 100px;
margin: auto;
outline: none;
border: 3px solid black;;
}