当你的鼠标轻触文字时,一场奇幻的表演即将开始。欢迎来到我的博客,今天,我将分享一个惊艳的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代码创造出令人惊叹的鼠标悬停文字分割动画效果。通过将想象转化为现实,我们让文字在用户的互动下舞动,为网页增添了独特的艺术性和魅力。无论你是新手还是经验丰富的开发者,我希望本文能够激发你的创意,并在实践中探索更多可能。如果你有任何问题或想法,欢迎在评论区与我分享。让我们继续探索前端的无限魅力,用代码书写出更多令人惊叹的故事吧!感谢阅读,期待与你的下一次相约!