如何爲`a`元素添加邊框顏色動畫？

我設置了包含邊框的標誌，我用了一個a元素，但邊境動畫不工作，他們留他們是如何規定;我將如何製作它，以便邊框顏色可以在動畫中更改？如何爲`a`元素添加邊框顏色動畫？

.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>

來源

2015-09-01 Skylark

嘿OfficialAntarctica。

這是因爲href標籤是空的。它必須被填充或者根本不存在href屬性。

我放在一起顯示此行爲的jsBin here和href屬性爲空時，動畫將不會運行，直到我放置一個虛擬鏈接。

body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
.anim { 
 
    display: inline-block; 
 
    border : 5px solid red; 
 
    padding: 5px; 
 
    animation: animateBorder 1s ease infinite; 
 
} 
 
@keyframes animateBorder { 
 
    from { 
 
    border: 5px solid red; 
 
    } 
 
    to { 
 
    border: 5px solid blue; 
 
    } 
 
} 
 
@-webkit-keyframes animateBorder { 
 
    from { 
 
    border: 5px solid red; 
 
    } 
 
    to { 
 
    border: 5px solid blue; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
</head> 
 
<body> 
 
    <a class="anim" href="/link.com">I am an animated link.</a> 
 
    <a class="anim" href="">I won't animate.</a> 
 
</body> 
 
</html>

希望幫助你！

UPDATE ::經過進一步調查，目前所需的行爲在Chrome中無法正常工作。它適用於Firefox。我曾嘗試使用僞元素來查看這是否可能，但似乎唯一的Chrome解決方案是將鏈接包裝爲span元素並對其進行動畫處理。

來源

2015-09-01 12:42:44 jh3y

謝謝，但是一個外部網站的鏈接將不起作用'I am meant to be an animated link.'例如不會動畫 – Skylark

哇，這確實是一些奇怪的行爲。因爲，例如'http：// google.com'可以正常工作。 '.com'作品很酷，但'.io'扮演了...... – jh3y

呀，我還鏈接到與.tf結局網站和他們有同樣的問題 – Skylark

設置href價值似乎來解決此問題：

動畫與div元素

例完美的作品。

.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="javascript:;"></a>

來源

2015-09-01 12:42:15 Miyuki

但是，我將如何鏈接到另一個網頁？ – Skylark

您可以將鏈接設置爲任何其他網頁。問題是'href =「」' – Miyuki

仍然有問題（請參閱OP） – Skylark

如何爲`a`元素添加邊框顏色動畫？

回答

相關問題