境界線の色を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.