艺术与代码的完美结合：实现鼠标悬停文字分割动画

当你的鼠标轻触文字时，一场奇幻的表演即将开始。欢迎来到我的博客，今天，我将分享一个惊艳的CSS技巧，它可以让文字在鼠标悬停下分裂成上下两部分，仿佛音符般的动感，让你的页面瞬间生动起来。无需繁杂的代码，我将带你逐步探索如何实现这个独特的效果，让我们一同在创意的海洋里畅游，为你的网页增添一抹魔法！

好~废话不多说，先上最终实现效果图

今天这个同样也值得8块大洋，还不赶快学起来，接下来直接手撸代码

分析过程

1. HTML结构：我们需要一个一个容器来承载我们的文字，这里我选择 <h1> 标签，需要考虑的是，我们需要将文字进行分割，则css需要获取到我们的的文字，则需要一个自定义的属性，这里我是用的是 text-content

2. CSS样式：

(1). 最重要的就是 ::before , ::after 内使用 content:attr(text-content) 拿到文字，然后将两个元素各裁剪一半，放在指定的位置即可

(2). 移动这里我选择使用的是 transform 搭配 transition 的组合，当然也可以使用关键帧动画来进行实现，不过能用简单的为什么不用呢~

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>文字切割</title>
</head>

<body>
  <h1 text-content="艺术与代码的完美结合">艺术与代码的完美结合</h1>
</body>

</html>

CSS

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #ecf0f1;
}

h1 {
  font-size: 50px;
  position: relative;
  color: transparent;
  caret-color: white;
  outline: none;
  cursor: text;
  white-space: nowrap;
}

h1::before,
h1::after {
  content: attr(text-content);
  /* 将文字内容赋给伪元素 */
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
  color: #000;
}

h1::before {
  top: 0;
  height: 50%;
  border-bottom: 1px solid transparent;
  /* 实现中心有切割效果的样式 */
  box-sizing: border-box;
  transition: all 1.6s;
}

h1::after {
  bottom: 0;
  height: 50%;
  display: flex;
  align-items: flex-end;
  border-top: 1px solid transparent;
  /* 实现中心有切割效果的样式 */
  box-sizing: border-box;
  /* 该样式是为了让border显示出来 */
  transition: all 1.6s;
}


h1:hover {
  cursor: pointer;
}

h1:hover::before {
  color: #e74c3c;
  transform: translateX(.5em);
  /* 移动半个文字的距离 */
}

h1:hover::after {
  color: #e74c3c;
  transform: translateX(-.5em);
}

至此，这个CSS效果已经实现，期望对你有所收获~O(∩_∩)O哈哈~

在这个精彩的探索中，我们学会了如何用简单的CSS代码创造出令人惊叹的鼠标悬停文字分割动画效果。通过将想象转化为现实，我们让文字在用户的互动下舞动，为网页增添了独特的艺术性和魅力。无论你是新手还是经验丰富的开发者，我希望本文能够激发你的创意，并在实践中探索更多可能。如果你有任何问题或想法，欢迎在评论区与我分享。让我们继续探索前端的无限魅力，用代码书写出更多令人惊叹的故事吧！感谢阅读，期待与你的下一次相约！