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

Question

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

csscss-animations

4

我正在设计一个带有边框的标志，我使用了元素，但是边框动画不起作用，边框颜色如之前所述；我该如何使边框颜色可以在动画中改变？

使用

元素时，动画效果非常好。

示例：

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

- Zed

2个回答

0

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

- Miyuki

但是我该如何链接到另一个网页？ - Zed

您可以将链接设置为任何其他网页。问题在于 href=""。 - Miyuki

仍然存在问题（参见 OP） - Zed

真的很奇怪！就像上面所说的，<a class="anim" href="javascript:location.href='http://codepen.io/';"></a>现在可以作为一种解决方法… - Miyuki

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jhey · Accepted Answer

嘿，OfficialAntarctica。

这是因为 href 标签为空。它必须填充或者根本没有 href 属性。

我制作了一个 jsBin 来展示这种行为（点击此处），当 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>

希望能帮到您！

更新：经过进一步调查，Chrome目前无法实现所需的行为。在Firefox中可以使用。我尝试使用伪元素来看是否可能实现，但似乎唯一的Chrome解决方法是将链接包装在一个元素中并对其进行动画处理。