Question

我正在设置一个包含边框的徽标，我使用了a元素，但边框动画不起作用，它们保持原样;我该如何制作它以便边框颜色可以在动画中改变？

动画与div元素完美配合

示例：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

Hey 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元素并为其设置动画。

Answer 2

设置href值似乎可以解决问题。

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

如何为`a`元素添加边框颜色动画？

2 个答案: