CSS 实现 hover 时文字展开式变色效果

站长

2023年07月30日 12:43 · 阅读数 11

a 标签 hover 时变色的效果想必大家都能写出来：

但如果想要 hover 的时候从左到右依次变色的效果呢：

CSS 实现 hover 时文字展开式变色效果

这种效果能写出来的就不多了，因为它的思路比较巧妙。

下面我们一起来写一下。

<!DOCTYPE html>
<html lang="en">
<body>  
  <a href="#"><span>Hello Guang</span>Hello Guang</a>
</body>
</html>

很明显，我们需要另一个元素来做一个从左到右的位移，所以我们加一个 span 标签。

然后来写样式：

body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 100vh;
}

body 部分设置一个 flex 的居中，指定最小高度为 100 个 vh 也就是整个视口的高度。

然后设置 a 标签的样式：

a {
  display: inline-block;
  font-size: 16px;
  color: orange;
  background: red;
  font-weight: 800;
  text-decoration: underline;
}

为了调试方便，我们加一个红色背景。

现在是这样的：

CSS 实现 hover 时文字展开式变色效果

在网页中绝对居中。

然后设置 span 的样式：

a {
  position: relative;
}

a span {
  position: absolute;
  top: 0;
  left: 0;
  background: blue;
  overflow: hidden;
}

CSS 实现 hover 时文字展开式变色效果

span 设置为蓝色背景，和 a 标签的文字重合了。

然后再 translate 回去：

a span {
    transform: translateX(-100%);
}

CSS 实现 hover 时文字展开式变色效果

hover 的时候再 translate 回来：

a {
    transform: translateX(-100%);
    transition: transform 300ms ease;
}
a:hover span {
    transform: translateX(0);
}

加一个 transition 300ms 的过渡效果。

现在是这样的：

CSS 实现 hover 时文字展开式变色效果

给 a 加个 overflow:hidden，就达到初步的效果了：

CSS 实现 hover 时文字展开式变色效果

去掉背景颜色，给 span 文字设置为蓝色并加个下划线，就是这样的：

CSS 实现 hover 时文字展开式变色效果

现阶段代码如下：

<!DOCTYPE html>
<html lang="en">
<body>  
  <a href="#"><span>Hello Guang</span>Hello Guang</a>
  <style>
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      min-height: 100vh;
    }

    a {
      position: relative;
      display: inline-block;
      font-size: 32px;
      color: orange;
      font-weight: 800;
      text-decoration: underline;
      overflow: hidden;
    }

    a span {
        position: absolute;
        top: 0;
        left: 0;
        color: blue;
        overflow: hidden;
        transform: translateX(-100%);
        transition: transform 300ms ease;
        text-decoration: underline;
    }
    
    a:hover span {
      transform: translateX(0);
    } 
    </style>
</body>
</html>

但这样和我们想要的效果还是有差距，两个文字并没有重合。

怎么能让移动 span 的时候两边的文字完全重合呢？

这需要两个运动，span 向右运动，文字向左运动，就能实现这种逐渐展开的效果。

也就是这样：

a span {
  position: absolute;
  top: 0;
  left: 0;
  background: green;
  overflow: hidden;
  transform: translateX(-100%);
  transition: transform 300ms ease;
}
a span::before {
  display: inline-block;
  content: 'Hello Guang';
  color: blue;
  transform: translateX(100%);
  transition: transform 300ms ease;
  text-decoration: underline;
}
a:hover span {
  transform: translateX(0);
}
a:hover span::before {
  transform: translateX(0);
}

给 span 加一个 before 伪元素，span translateX(-100%)移动到左边，before 伪元素再 translateX(100%)，正好移动回去和 a 标签的文字重合了。

CSS 实现 hover 时文字展开式变色效果

然后 hover 的时候都移动到 translateX(0)，也就是一个向左动，一个向右动。

CSS 实现 hover 时文字展开式变色效果

这样，我们就实现想要的效果了！

然后加上 overflow:hidden，并把背景去掉：

CSS 实现 hover 时文字展开式变色效果

同时，before 伪元素哪里可以从 data- 属性中取内容，而不是直接写死：

<a href="#"><span data-content="Hello Guang"></span>Hello Guang</a>

a span::before {
  display: inline-block;
  content: attr(data-content);
}

完整代码如下：

<!DOCTYPE html>
<html>
<body>
    <a href="#"><span data-content="Hello Guang"></span>Hello Guang</a>
    <style>
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      min-height: 100vh;
    }

    a {
      position: relative;
      display: inline-block;
      font-size: 32px;
      color: orange;
      font-weight: 800;
      text-decoration: underline;
      overflow: hidden;
    }
    a span {
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
      transform: translateX(-100%);
      transition: transform 300ms ease;
    }
    a span::before {
      display: inline-block;
      content: attr(data-content);
      color: blue;
      transform: translateX(100%);
      transition: transform 300ms ease;
      text-decoration: underline;
    }
    a:hover span {
      transform: translateX(0);
    }
    a:hover span::before {
      transform: translateX(0);
    }
    </style>
</body>
</html>

总结

我们实现了 hover 时文字展开式变色的效果。

它需要两个运动，容器向右运动，内容向左运动，这样就是逐渐展开的一个效果。

重叠原来的文字上就是从左到右依次变色的效果了。

有没有感觉思路很巧妙呢？