如何使用 HTML 和 CSS 在悬停时倾斜文本？

使用 HTML 和 CSS 可以实现在悬停时倾斜文本的效果，具体实现方法如下：

1. 首先，在 HTML 文件中添加一个文本元素，如下所示：

<p class="tilt-effect">Hello, world!</p>

2. 接下来，在 CSS 文件中添加如下样式：

.tilt-effect {
  position: relative;
  display: inline-block;
}

.tilt-effect:hover::before,
.tilt-effect:hover::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #333;
  transform-origin: center;
  transition: transform 0.3s ease;
}

.tilt-effect:hover::before {
  transform: rotate(3deg);
}

.tilt-effect:hover::after {
  transform: rotate(-3deg);
}

3. 解释一下上述 CSS 样式的作用：

• .tilt-effect 类设置了元素的相对定位，使得后续的伪元素可以相对于该元素定位。
• ::before 和 ::after 伪元素分别在文本元素的上下方添加了一个 3px 高的水平条形元素。
• transform-origin 属性指定了旋转变换的中心点，这里是设置为它们的中心点。
• transition 属性使得元素在悬停时能够有一个过渡效果。
• :hover 伪类表示鼠标悬停时应用样式，这里是旋转伪元素。

完成上述操作后，当鼠标悬停在文本元素上方时，它会呈现出倾斜的效果，如下所示：

注意： 样式中的 #333 是指颜色代码，您可以根据自己的喜好进行更改。

以上就是使用 HTML 和 CSS 在悬停时倾斜文本的详细说明。

参考资料:

• CSS :hover 伪类介绍
• CSS 2D 变换 transform