每隔n秒更改边框的颜色

Question

我想更改边框的颜色，以便颜色每秒都变为另一种颜色。我不知道该怎么做，有什么帮助？这是我的代码。

/* Style the links inside the list items */ 
 
ul.topnav li a { 
 
    display: inline-block; 
 
    border-left: 3px solid; 
 
    border-left-color: #FF0000; 
 
    border-top-color: #F5FF00; 
 
    border-top-style: double; 
 
    border-bottom: 3px solid; 
 
    border-bottom-color: #FF0000; 
 
    border-right-style: double; 
 
    border-right-color: #F5FF00; 
 
    border-radius: 40px; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    transition: 0.3s; 
 
    font-size: 17px; 
 
}

<header> 
 
    <ul class="topnav" id="drop"> 
 
    <li><a class="selected" href="home.html">Home</a></li> 
 
    <li> 
 
     <a href="project.html">Project</a> 
 
     <ul> 
 
     <li><a href="project.html">Algemeen</a></li> 
 
     <li><a href="test.html">test</a></li> 
 
     <li><a href="test2.html">test2</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="contact.html">Contact</a></li> 
 
    <li class="icon"> 
 
     <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a> 
 
    </li> 
 
    </ul> 
 
</header>

Answer 1

如果您知道颜色或者干脆你不在乎的顺序，你可以使用一个叫做@Keyframes animation CSS规则，它与大多数现代browsers并可以兼容做了很多棘手的事情是这样的：

.border-glow { 
 
    border: 1px solid blue; 
 
    animation: 4s infinite glow; 
 
} 
 
@keyframes glow { 
 
    0% { 
 
    border-color: red; 
 
    } 
 
    25% { 
 
    border-color: blue; 
 
    } 
 
    75% { 
 
    border-color: yellow; 
 
    } 
 
    100% { 
 
    border-color: purple; 
 
    } 
 
} 
 
@-webkit-keyframes glow { 
 
    0% { 
 
    border-color: red; 
 
    } 
 
    25% { 
 
    border-color: blue; 
 
    } 
 
    75% { 
 
    border-color: yellow; 
 
    } 
 
    100% { 
 
    border-color: purple; 
 
    } 
 
}

<div class="border-glow">Shiny!</div>

Working jdfiddle demo.