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

2023-05-0809:06:29网页制作Comments899 views字数 2988阅读模式
CSS 实现 hover 时文字展开式变色效果

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

CSS 实现 hover 时文字展开式变色效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38814.html

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

CSS 实现 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

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

在网页中绝对居中。文章源自菜鸟学院-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;
}
CSS 实现 hover 时文字展开式变色效果

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

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

a span {
    transform: translateX(-100%);
}
CSS 实现 hover 时文字展开式变色效果

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

CSS 实现 hover 时文字展开式变色效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38814.html

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

CSS 实现 hover 时文字展开式变色效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38814.html

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

CSS 实现 hover 时文字展开式变色效果文章源自菜鸟学院-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

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

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

CSS 实现 hover 时文字展开式变色效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/38814.html

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

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

CSS 实现 hover 时文字展开式变色效果文章源自菜鸟学院-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
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/zhizuo/38814.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定