无限边框颜色循环

Infinite border color loop

本文关键字：循环 颜色 边框 无限      更新时间：2023-09-26

我想有这种效果，但不是在整个主体背景上，而是在我的一个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中无限循环地更改边框颜色：我洗耳恭听：-）

谢谢！

您正在将其应用于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/

动画border-color而不是background:

@keyframes blink {
    0%   { border-color: red; }
    50%  { border-color: green;}
    100% { border-color: red; }
}
body {
    border: 15px solid;
    animation: blink 1s infinite;
}

一些浏览器可能需要供应商前缀

演示

http://jsfiddle.net/ANMPt/162/

将其更改为边框颜色。

            @-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; }
            }
            body{
                 -webkit-animation: blink 1s infinite;
                 -moz-animation:    blink 1s infinite;
                 -ms-animation:     blink 1s infinite;
                 border: 20px solid red;  /* cant animate border without a border... */
                 height: 200px; / * for illustration purpose */
            }

将其应用于正确的属性（border-color而不是background）和正确的元素（最好使用class选择器，这样效果可以应用于任何元素，而不是仅应用于div）。

另外，不要忘记使用（始终作为最后一个）默认的@keyframe语法，而不是带前缀的语法。

演示

HTML

<div class="animatedBorder"></div>

CSS

@-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; }
}
@keyframes blink {
        0%   { border-color:red; }
        50%  { border-color:green;}
        100% { border-color:red; }
}
.animatedBorder{
     -webkit-animation: blink 1s infinite;
     -moz-animation:    blink 1s infinite;
     -ms-animation:     blink 1s infinite;
}
div.animatedBorder{
    margin: 20px;
    width: 100px;
    height: 100px;
    border: 5px solid transparent;
}

FIX 正在为border-color而不是background设置动画

但是，如果您需要将此效果添加到div 中

只需在body 中添加一个div

然后将css中的background更改为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{
    border:2px solid;
    width:200px;
    height:200px;
     -webkit-animation: blink 1s infinite;
     -moz-animation:  blink 1s infinite;
     -ms-animation:   blink 1s infinite;
}

@-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{
    border:solid 1px red;
     -webkit-animation: blink 1s infinite;
     -moz-animation:    blink 1s infinite;
     -ms-animation:     blink 1s infinite;
}

用border-color替换所有出现的background，然后在div元素而不是主体上使用它们。

您可能必须首先为div定义一个边界（如#000000 1px solid）才能对其进行动画化。

http://jsfiddle.net/ANMPt/165/

您需要更改动画定义的样式：

    0%   { border-color:red; }
    50%  { border-color:green;}
    100% { border-color:red; }

并为您的div定义一个边界：

#myDiv{
    height: 300px;
    width:300px;
    border-width:5px;
    border-style:solid;
     -webkit-animation: blink 1s infinite;
     -moz-animation:    blink 1s infinite;
     -ms-animation:     blink 1s infinite;
}
相关文章：