使用CSS动画链接边框

Question

我正在尝试在链接周围创建一个蓝色边框，该边框将设置动画并将边框颜色更改为黄色。

我有代码显示悬停动画，但我尝试添加普通链接的蓝色轮廓时未成功。

如何创建将转换为黄色的蓝色轮廓？

这是一支笔：http://codepen.io/Norm101/pen/QdvgaB

p {
  text-align: center;
  margin: 40px 0;
}
/*--------------------------------------------             
    
    ANIMATED LINKS
    ---------------------------------------------*/

div.al-hover {
  margin: 50px;
  text-align: center;
}
.al-hover a {
  font: arial;
  display: inline-block;
  position: relative;
  overflow: hidden;
  -moz-transition: ease-out 0.3s 0.1s;
  -o-transition: ease-out 0.3s 0.1s;
  -webkit-transition: ease-out 0.3s;
  -webkit-transition-delay: 0.1s;
  transition: ease-out 0.3s 0.1s;
  padding: 20px;
  text-decoration: none;
  overflow: hidden;
  background: #f3f3f3;
}
.al-hover a span::before {
  width: 100%;
  height: 1px;
  background: #f5aa36;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
.al-hover a span::after {
  width: 100%;
  height: 1px;
  background: #f5aa36;
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}
.al-hover a::before {
  width: 1px;
  height: 100%;
  background: #f5aa36;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.al-hover a::after {
  width: 1px;
  height: 100%;
  background: #f5aa36;
  content: "";
  position: absolute;
  right: 0px;
  bottom: 0;
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.al-hover a:hover {
  color: #666;
}
.al-hover a:hover::before,
.al-hover a:hover::after {
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.al-hover a:hover span::before,
.al-hover a:hover span::after {
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

<div class="al-hover"><a href="/what-we-do/"><span>What We Do</span></a>
</div>

Answer 1

以下是实现您正在寻找的效果的一种方法。该方法使用linear-gradient背景作为四个伪元素，这两个伪元素用于创建边框，如边线上的线条。

该方法的工作原理如下：

• 如上所述，所有四个伪元素（最初都是纯实色背景）都被指定为linear-gradient，蓝色为前33％，从蓝色平滑过渡到33％到66％之间然后是最后34％的黄色（即66％）。
• 所有四个伪元素的width或height都设置为300%。这样可以确保渐变中33％的蓝色实际上意味着父颜色的整个宽度都是蓝色。
• 这些元素最初是通过+/- 67%在X或Y轴（根据需要）转换的。这意味着在开始时只能看到渐变的蓝色部分。
• 一旦悬停开启，伪元素转换将被取消（或恢复为0％）。因此渐变的黄色部分在终点处变得可见。当转换发生时，我们也可以看到中间部分（即渐变从蓝色到黄色的中间部分），这使得它看起来好像边框颜色从蓝色到黄色一样平滑，就像在侧对侧颜色过渡。

＆＃13;

＆＃13;

p {
  text-align: center;
  Margin: 40px 0;
}
div.al-hover {
  margin: 50px;
  text-align: center;
}
.al-hover a {
  font: arial;
  display: inline-block;
  position: relative;
  transition: ease-out 3s 0.1s;
  padding: 20px;
  text-decoration: none;
  overflow: hidden;
  background: #f3f3f3;
}
.al-hover a span::before {
  width: 300%;
  height: 1px;
  background: linear-gradient(to left, blue 33%, #f5aa36 66%);
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  transition: 3s;
  transform: translateX(-67%);
}
.al-hover a span::after {
  width: 300%;
  height: 1px;
  background: linear-gradient(to right, blue 33%, #f5aa36 66%);
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  transition: 3s;
  transform: translateX(67%);
}
.al-hover a::before {
  width: 1px;
  height: 300%;
  background: linear-gradient(to top, blue 33%, #f5aa36 66%);
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-67%);
  transition: 3s;
}
.al-hover a::after {
  width: 1px;
  height: 300%;
  background: linear-gradient(to bottom, blue 33%, #f5aa36 66%);
  content: "";
  position: absolute;
  right: 0px;
  bottom: 0;
  transform: translateY(67%);
  transition: 3s;
}
.al-hover a:hover {
  color: #666;
}
.al-hover a:hover::before,
.al-hover a:hover::after {
  transform: translateX(0);
}
.al-hover a:hover span::before,
.al-hover a:hover span::after {
  transform: translateX(0);
}

＆＃13;

<div class="al-hover"><a href="/what-we-do/"><span>What We Do</span></a>
</div>

＆＃13;

＆＃13;

＆＃13;

在下面的代码段中， 删除了 overflow: hidden，以便您了解它是如何实际创建效果的。

＆＃13;

＆＃13;

p {
  text-align: center;
  Margin: 40px 0;
}
div.al-hover {
  margin: 50px;
  text-align: center;
}
.al-hover a {
  font: arial;
  display: inline-block;
  position: relative;
  transition: ease-out 3s 0.1s;
  padding: 20px;
  text-decoration: none;
  background: #f3f3f3;
}
.al-hover a span::before {
  width: 300%;
  height: 1px;
  background: linear-gradient(to left, blue 33%, #f5aa36 66%);
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  transition: 3s;
  transform: translateX(-67%);
}
.al-hover a span::after {
  width: 300%;
  height: 1px;
  background: linear-gradient(to right, blue 33%, #f5aa36 66%);
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  transition: 3s;
  transform: translateX(67%);
}
.al-hover a::before {
  width: 1px;
  height: 300%;
  background: linear-gradient(to top, blue 33%, #f5aa36 66%);
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-67%);
  transition: 3s;
}
.al-hover a::after {
  width: 1px;
  height: 300%;
  background: linear-gradient(to bottom, blue 33%, #f5aa36 66%);
  content: "";
  position: absolute;
  right: 0px;
  bottom: 0;
  transform: translateY(67%);
  transition: 3s;
}
.al-hover a:hover {
  color: #666;
}
.al-hover a:hover::before,
.al-hover a:hover::after {
  transform: translateX(0);
}
.al-hover a:hover span::before,
.al-hover a:hover span::after {
  transform: translateX(0);
}

＆＃13;

<div class="al-hover"><a href="/what-we-do/"><span>What We Do</span></a>
</div>

＆＃13;

＆＃13;

＆＃13;

同样的效果 也可以实现，而不使用4个额外的伪元素 。这将涉及使用4张背景图片并在悬停时转换background-position。

＆＃13;

＆＃13;

p {
  text-align: center;
  Margin: 40px 0;
}
div.al-hover {
  margin: 50px;
  text-align: center;
}
.al-hover a {
  font: arial;
  display: inline-block;
  position: relative;
  transition: ease-out 3s 0.1s;
  padding: 20px;
  text-decoration: none;
  overflow: hidden;
  background-color: #f3f3f3;
  background-image: linear-gradient(to left, blue 33%, #f5aa36 66%), linear-gradient(to right, blue 33%, #f5aa36 66%), linear-gradient(to bottom, blue 33%, #f5aa36 66%), linear-gradient(to top, blue 33%, #f5aa36 66%);
  background-repeat: no-repeat;
  background-size: 300% 1px, 300% 1px, 1px 300%, 1px 300%;
  background-position: right top, left bottom, right top, left bottom;
}
.al-hover a:hover {
  color: #666;
  background-position: left top, right bottom, right bottom, left top;
}

＆＃13;

<div class="al-hover"><a href="/what-we-do/">What We Do</a>
</div>

＆＃13;

＆＃13;

＆＃13;

如果 不需要中间转换效果 ，只需将蓝色替换为黄色，那么我们可以像下面的代码段那样进行：

＆＃13;

＆＃13;

p {
  text-align: center;
  Margin: 40px 0;
}
div.al-hover {
  margin: 50px;
  text-align: center;
}
.al-hover a {
  font: arial;
  display: inline-block;
  position: relative;
  transition: ease-out 3s 0.1s;
  padding: 20px;
  text-decoration: none;
  overflow: hidden;
  background: #f3f3f3;
}
.al-hover a span::before {
  width: 200%;
  height: 1px;
  background: linear-gradient(to left, blue 50%, #f5aa36 50%);
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  transition: 3s;
  transform: translateX(-50%);
}
.al-hover a span::after {
  width: 200%;
  height: 1px;
  background: linear-gradient(to right, blue 50%, #f5aa36 50%);
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  transition: 3s;
  transform: translateX(50%);
}
.al-hover a::before {
  width: 1px;
  height: 200%;
  background: linear-gradient(to top, blue 50%, #f5aa36 50%);
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-50%);
  transition: 3s;
}
.al-hover a::after {
  width: 1px;
  height: 200%;
  background: linear-gradient(to bottom, blue 50%, #f5aa36 50%);
  content: "";
  position: absolute;
  right: 0px;
  bottom: 0;
  transform: translateY(50%);
  transition: 3s;
}
.al-hover a:hover {
  color: #666;
}
.al-hover a:hover::before,
.al-hover a:hover::after {
  transform: translateX(0);
}
.al-hover a:hover span::before,
.al-hover a:hover span::after {
  transform: translateX(0);
}

＆＃13;

<div class="al-hover"><a href="/what-we-do/"><span>What We Do</span></a>
</div>

＆＃13;

＆＃13;

＆＃13;

这也可以 进一步即兴 以获得类似下面的内容，它在悬停开始时看起来像蓝色被消灭然后黄色爬进来徘徊时反向发生。

＆＃13;

＆＃13;

p {
  text-align: center;
  Margin: 40px 0;
}
div.al-hover {
  margin: 50px;
  text-align: center;
}
.al-hover a {
  font: arial;
  display: inline-block;
  position: relative;
  transition: ease-out 3s 0.1s;
  padding: 20px;
  text-decoration: none;
  overflow: hidden;
  background: #f3f3f3;
}
.al-hover a span::before {
  width: 300%;
  height: 1px;
  background: linear-gradient(to left, blue 33%, transparent 33%, transparent 66%, #f5aa36 66%);
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  transition: 3s;
  transform: translateX(-67%);
}
.al-hover a span::after {
  width: 300%;
  height: 1px;
  background: linear-gradient(to right, blue 33%, transparent 33%, transparent 66%, #f5aa36 66%);
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  transition: 3s;
  transform: translateX(67%);
}
.al-hover a::before {
  width: 1px;
  height: 300%;
  background: linear-gradient(to top, blue 33%, transparent 33%, transparent 66%, #f5aa36 66%);
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-67%);
  transition: 3s;
}
.al-hover a::after {
  width: 1px;
  height: 300%;
  background: linear-gradient(to bottom, blue 33%, transparent 33%, transparent 66%, #f5aa36 66%);
  content: "";
  position: absolute;
  right: 0px;
  bottom: 0;
  transform: translateY(67%);
  transition: 3s;
}
.al-hover a:hover {
  color: #666;
}
.al-hover a:hover::before,
.al-hover a:hover::after {
  transform: translateX(0);
}
.al-hover a:hover span::before,
.al-hover a:hover span::after {
  transform: translateX(0);
}

＆＃13;

<div class="al-hover"><a href="/what-we-do/"><span>What We Do</span></a>
</div>

＆＃13;

＆＃13;

＆＃13;

（注意：在所有片段中，我都增加了转换持续时间，以使转换更加明显。）