CSS文字分割过渡效果

鼠标悬停在文本上，创造了一种流畅的悬停动画，外层文字会分开，露出下面隐藏的内层文字。

代码：

<h2>
  Believe
  <span>Believe</span>
  <span>Believe</span>
  <span>in yourself</span>
</h2>
<style>
body { 
  margin: 0; padding: 0;
  min-height:100vh;
  font-family:consolas;
}
h2 {
  margin: 0; padding: 0;
  position:absolute;
  top: 50%; left: 50%;
  transform:translate(-50%,-50%);
  font-size: 6em; color:transparent;
  text-transform:uppercase;
}
h2 span:nth-child(1){
  position:absolute;
  top:0; left:0; color: #000;
  transition:0.5s;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  overflow:hidden;
}
h2:hover span:nth-child(1){
  transform:translateY(-18px); 
}
h2 span:nth-child(2){
  position:absolute;
  top:0; left:0; color: #000;
  transition:0.5s;
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
  overflow:hidden;
}
h2:hover span:nth-child(2){
  transform:translateY(18px); 
}
h2 span:nth-child(3){
  position:absolute;
  top:50%; left: 0;
  transform:translateY(-50%) scaleY(0);
  width: 91%; color: #000;
  background:#ff0;
  font-size: 0.25em; font-weight: 500;
  letter-spacing:0.7em;
  text-align:center;
  padding-left: 20px; margin-left: 5px;
  transition:0.5s;
}
h2:hover span:nth-child(3){
  transform:translateY(-50%) scaleY(1);
}
</style>

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/course/33_2161