编程-学习-思考

6 种超链接效果(下)

介绍 CSS 如何让超链接变得更加生动和精彩

4. 字体颜色从右到左变化效果

最终实现的效果就是从右到左把字体从当前颜色变成你想要的颜色，当然这个速度是可以通过参数来控制的。再此之上还加了一个下划线从左到右变化的效果，下面就然我们来看看是如何实现的吧。

首先，我们指定一个颜色渐变效果，to right 表示从左到右，而50%表示两种颜色各占一半：

a {
  background-image: linear-gradient(
    to right,
    #54b3d6 50%,
    #000 50%
  );
}

然后，我们再使用 background-size 属性把背景扩大成链接文字的两倍，这样就只能看到其中一种颜色了，加上之后就是这个样子：

a {
  background-image: linear-gradient(
    to right,
    #54b3d6 50%,
    #000 50%
  );
  background-size: 200% 100%;
  background-position: -100%;
}

不过，要让背景颜色融入自己，我们可以使用 webkit 属性，如下再添加两个即可：

a {
  background-image: linear-gradient(
    to right,
    #54b3d6 50%,
    #000 50%
  );
  background-size: 200% 100%;
  background-position: -100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

注意到我们设置了 background-position 属性为 -100%，这样就只能看到黑色的那一半背景，我们把其设置为 0 就可以看到蓝色的背景，那么在什么适合设置呢，当然是鼠标放在链接上呀，因此再添加如下：

a:hover {
 background-position: 0;
}

不过，似乎少了一点东西，看起来变化的过程很是突然，这是因为我们还没有加动画效果，再次添加如下 transition 即可：

a {
  background-image: linear-gradient(
    to right,
    #54b3d6 50%,
    #000 50%
  );
  background-size: 200% 100%;
  background-position: -100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.3s ease-in-out;
}

那我们就来看看最后的效果吧。

颜色变化

5. 彩虹下滑线效果

好吧，其实这个实现起来也是很简单的。还是使用 linear-gradient 属性，指定渐变效果。这里指定了两个，一个作为普通下划线，另一个作为鼠标停留后彩虹效果：

a {
  background:
    linear-gradient(
      to right,
      rgba(100, 200, 200, 1),
      rgba(100, 200, 200, 1)
    ),
    linear-gradient(
      to right,
      rgba(255, 0, 0, 1),
      rgba(255, 0, 180, 1),
      rgba(0, 100, 200, 1)
  );
  background-size: 100% 3px, 0 3px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
}

然后，指定背景大小和位置，注意这里有两个。当然对应前面两个background。从参数不难看出鼠标不停留的情况下，第一个背景占据了全部。那么，鼠标停留效果就是到过来的，第二个彩虹效果的占据了全部大小，就得到如下css的设置：

a:hover {
  background-size: 0 3px, 100% 3px;
}

还剩下最后一步，没错就是转场动画。添加如下：

transition: background-size 400ms

那么我们就来看一下最终的效果吧：

一道彩虹

6. 下划线跑火车效果

这个效果实现起来也是相当简单，废话不多说直接上代码：

a {
  position: relative;
}

a::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    border-radius: 4px;
    background-color: #18272F;
    bottom: 0;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
  }

a:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}

其中几个比较关键的地方是 transform , 使用了 before 伪元素。transform-origin指定了动画开始点，而 transform 指定了从X轴横向扩展。transition 指定动画效果。

来看看最终的效果吧：

跑火车

代码已在这里准备好，欢迎下载使用。

11 Jan 2023

csslearn