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

2023-05-0809:06:29网页制作Comments1,870 views字数 2988阅读模式

宝塔Linux面板高效运维的服务器管理软件点击立即购买

a 标签 hover 时变色的效果想必大家都能写出来：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38814.html

但如果想要 hover 的时候从左到右依次变色的效果呢：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38814.html

这种效果能写出来的就不多了，因为它的思路比较巧妙。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38814.html

下面我们一起来写一下。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38814.html

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

很明显，我们需要另一个元素来做一个从左到右的位移，所以我们加一个 span 标签。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38814.html

然后来写样式：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38814.html

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

body 部分设置一个 flex 的居中，指定最小高度为 100 个 vh 也就是整个视口的高度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38814.html

然后设置 a 标签的样式：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38814.html

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

为了调试方便，我们加一个红色背景。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38814.html

现在是这样的：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38814.html

在网页中绝对居中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38814.html

然后设置 span 的样式：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38814.html

a {
  position: relative;
}

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

span 设置为蓝色背景，和 a 标签的文字重合了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38814.html

然后再 translate 回去：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38814.html

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

hover 的时候再 translate 回来：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38814.html

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

加一个 transition 300ms 的过渡效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38814.html

现在是这样的：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38814.html

给 a 加个 overflow:hidden，就达到初步的效果了：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38814.html

去掉背景颜色，给 span 文字设置为蓝色并加个下划线，就是这样的：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38814.html

现阶段代码如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38814.html

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

但这样和我们想要的效果还是有差距，两个文字并没有重合。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38814.html

怎么能让移动 span 的时候两边的文字完全重合呢？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38814.html

这需要两个运动，span 向右运动，文字向左运动，就能实现这种逐渐展开的效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38814.html

也就是这样：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38814.html

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 标签的文字重合了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38814.html

然后 hover 的时候都移动到 translateX(0)，也就是一个向左动，一个向右动。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38814.html

这样，我们就实现想要的效果了！文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38814.html

然后加上 overflow:hidden，并把背景去掉：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38814.html

同时，before 伪元素哪里可以从 data- 属性中取内容，而不是直接写死：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38814.html

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

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

完整代码如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38814.html

<!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 时文字展开式变色的效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38814.html

它需要两个运动，容器向右运动，内容向左运动，这样就是逐渐展开的一个效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38814.html

重叠原来的文字上就是从左到右依次变色的效果了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38814.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38814.html

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

总结

五种 HTML 属性创造更具包容性的web体验

3 种方式实现 CSS 弧形卡片

CSS新手菜鸟入门指南教程

GPT-4V新玩法：随手一画就能生成网页！

CSS负边距小范围使用两列布局

CSS使用justify实现 text-align文本两端对齐

CSS无需图片，实现圆角边框渐变色+背景透明效果

CSS 两行文字两端对齐与字符间距的处理技法

CSS Reset是什么？主流有哪几款？

CSS 新功能：锚点定位、Shapes、滚动捕捉(scroll snap)

Comment