使用 CSS 动画化 link 边框

Question

我正在尝试在 link 周围创建一个蓝色边框，它将动画化并将边框颜色更改为黄色。

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

我怎样才能创建一个会过渡到黄色的蓝色轮廓？

这是一支笔：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

下面是实现您正在寻找的效果的一种方法。该方法为四个 pseudo-elements 使用 linear-gradient 背景，这四个 pseudo-elements 用于在两侧创建像线条一样的边框。

该方法的工作原理如下：

如上所述，所有四个 pseudo-elements（最初有纯色背景）都被分配了一个 linear-gradient，前 33% 是蓝色的，在 33% 之间从蓝色平滑过渡到黄色% 到 66%，然后最后 34%（即 66%）变成黄色。
四个pseudo-elements中的width或height都设置为300%。这确保渐变中 33% 的蓝色实际上意味着父级整个宽度的蓝色。
这些元素最初在 X 或 Y 轴上（根据需要）平移 +/- 67%。这意味着在开始时只有渐变的蓝色部分可见。
悬停打开后，pseudo-element 翻译将被取消（或恢复为 0%）。所以渐变的黄色部分在终点处变得可见。随着过渡的发生，我们还可以看到中间部分（即渐变从蓝色变为黄色的中间部分），这使得边框颜色看起来好像从蓝色平滑变为黄色，就像在side-to-side 颜色过渡。

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

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

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

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

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

不用额外的4个pseudo-elements也可以达到同样的效果。这将涉及使用 4 个背景图像并在悬停时转换它们 background-position。

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

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

如果不需要in-between过渡效果只需要将蓝色换成黄色即可像下面的代码片段那样做：

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

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

这也可以进一步改进以获得类似下面的内容，在悬停开始时蓝色被擦除出来，然后黄色悄悄进入，悬停时发生相反的情况。

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

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

(注意：在所有片段中，我增加了过渡持续时间以使过渡更加明显。)

使用 CSS 动画化 link 边框

Animating link border with CSS

css

border

css-transitions