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.