我正在设计一个带有边框的标志,我使用了元素,但是边框动画不起作用,边框颜色如之前所述;我该如何使边框颜色可以在动画中改变?
使用
元素时,动画效果非常好。
示例:
.anim {
width: 20px;
height: 20px;
border: 10px solid #F44336;
display: block;
margin: 10px;
-webkit-animation: borderanim 1s ease infinite;
animation: borderanim 1s ease infinite;
}
@-webkit-keyframes borderanim {
0% {
border: 10px solid #F44336;
}
100% {
border: 10px solid #2196F3;
}
}
@keyframes borderanim {
0% {
border: 10px solid #F44336;
}
100% {
border: 10px solid #2196F3;
}
}
<div class="anim"></div>
<a class="anim" href="/"></a>
<br/>
<a class="anim" href="http://google.com/"></a>
<a class="anim" href="http://codepen.io/"></a>
<a class="anim" href="http://backpack.tf/"></a>
<a class="anim" href="javascript:location.href='http://codepen.io/';"></a>
<a class="anim" href="http://codepen.io/">我应该是一个动画链接。</a>
例如不会动画。 - Zedhttp://google.com
运行良好。.com
运行正常,但.io
却出现问题... - Jheyonclick = "window.location ='http://codepen.io';"
哈哈。肯定不是理想的,但可能有效。 - Jhey