效果
逻辑
把文字都叠在一起,分裂中间显示的文字透明度设置为0,触发鼠标事件就让向上移动的文字剪掉下半部分;向下移动的文字剪掉上半部分,让隐藏的文字透明度设置为1。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>分裂文字效果</title>
<style>
.box{
margin: 0 auto;
position: relative;
display: flex;
justify-content: center;
}
.yi,.er{
font-size: 50px;
line-height: 50px;
position: absolute;
color: orange;
}
.yi{
/* 裁剪文字的上半部分,括号里的四个值分别是
top,right,bottom,left */
clip-path: inset(0 0 50% 0);
}
.er{
/* 裁剪文字的下半部分 */
clip-path: inset(50% 0 0 0);
}
/* 第一个向上移动30px,第二个向下移动30px
这样子就能空出60px留给中间的超链接 */
.box:hover .yi{
top: -10px;
}
.box:hover .er{
top: 10px;
}
/* 让a标签内容显示 */
.box:hover a{
opacity: 1;
}
a{
/* 清除超链接下划线 */
text-decoration: none;
color: purple;
/* 这里设置和.yi .er一行的行高是为了让文字居中 */
line-height: 50px;
opacity: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="yi">努力</div>
<div class="er">努力</div>
<a href="#">加油</a>
</div>
</body>
</html>