一个文字hover效果的例子（一）

最新推荐文章于 2024-09-01 13:57:04 发布

似俗似不俗

最新推荐文章于 2024-09-01 13:57:04 发布

阅读量2.4k

点赞数 1

分类专栏： CSS 文章标签：前端 CSS

本文链接：https://blog.csdn.net/BGD150809213/article/details/96576178

版权

本文探讨如何使用CSS创建文字hover时线条从中间向两侧扩展的效果。通过分析和实战，作者介绍了两种方法，重点讲解了transform: scaleX()属性的作用，强调了其在二维和三维层面的扩展和缩放特性，以及实现所需注意的兼容性问题。

摘要由CSDN通过智能技术生成

作者有话说

嗨，各位，本章是一个系列合集，主要是对文字的hover效果，做一个合集，这个文章的里会总结很多hover效果，有我模仿的，也有创造的，目的就是创造一个能“用能直接拷贝”，“学能看懂原理”的系列文章。今天我们先来开始第一篇文章，看一下效果图。

分析

效果图是我最终实现的效果，假设我们现在看的是例子，先分析一下看到这个例子能看出什么样式。首先看到这个效果的第一眼，会想到用伪类来尝试一下，伪类定位到字体的底下。然后能发现鼠标放到字体上后，会出现效果过渡和颜色变化，所以会在hover状态下用到transition和opacity。最后会发现我们的线条宽度从中间开始横向扩展，此时就能想到2点：一个是width的宽度从0%-100%，另外一个就是transform: scaleX(0-1)。我们来分别实现一下这两个观点。

实战

观点一

# html
<span class="text">我是一个demo</span>
# css
.text {
  transition: all .5s ease;
  position: relative;
}

.text:hover {
  color: red;
}

.text::after {
  content: "";
  width: 0%;
  height: 3px;
  background: