无限边框颜色循环 [英] Infinite border color loop

问题描述

我想有这个效果，但不是在整个身体背景，但只是在我的div的一个边框。 （ http://jsfiddle.net/ANMPt/ ）

I want to have this effect, but not on the whole body background but just on the border of one of my div's. ( 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：我很耳朵： - ）

Or: if anyone has a better solution to get an infinite loop of changing border colors in CSS or JavaScript: i am all ears :-)

谢谢！

推荐答案

您正在将它应用于正文！为 div

You are applying it to the body! Do it for div

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

小提琴： http://jsfiddle.net/praveenscience/ANMPt/160/

但是，如果你说它是为边框，为 border-color 不适用于背景！

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

这篇关于无限边框颜色循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！