javascript - 无限边框颜色循环

Question

我想要这种效果，但不是在整个 body 背景上，而是在我的一个 div 的边框上。 ( http://jsfiddle.net/ANMPt/ )

@-webkit-keyframes blink {
    0%   { background:red; }
    50%  { background:green;}
    100% { background:red; }
}
@-moz-keyframes blink {
    0%   { background:red; }
    50%  { background:green;}
    100% { background:red; }
}
@-ms-keyframes blink {
    0%   { background:red; }
    50%  { background:green;}
    100% { background:red; }
}
body{
 -webkit-animation: blink 1s infinite;
 -moz-animation:    blink 1s infinite;
 -ms-animation:     blink 1s infinite;
}

如何只定位边界？

或者:如果有人有更好的解决方案来在 CSS 或 JavaScript 中无限循环更改边框颜色:我洗耳恭听:-)

谢谢!

Answer 1

您正在将它应用于body!为 div

做

div {
     -webkit-animation: blink 1s infinite;
     -moz-animation:    blink 1s infinite;
     -ms-animation:     blink 1s infinite;
}

fiddle :http://jsfiddle.net/praveenscience/ANMPt/160/

但是，如果你说它是为了边框，那就是为了 border-color 而不是 background!

@-webkit-keyframes blink {
        0%   { border-color:red; }
        50%  { border-color:green;}
        100% { border-color:red; }
}
@-moz-keyframes blink {
        0%   { border-color:red; }
        50%  { border-color:green;}
        100% { border-color:red; }
}
@-ms-keyframes blink {
        0%   { border-color:red; }
        50%  { border-color:green;}
        100% { border-color:red; }
}
div {
     -webkit-animation: blink 1s infinite;
     -moz-animation:    blink 1s infinite;
     -ms-animation:     blink 1s infinite;
     border: 2px solid;
}

fiddle :http://jsfiddle.net/praveenscience/ANMPt/167/