CSS动画 - 在中间剪切文本

Posted 2023-03-06

【中文标题】CSS动画 - 在中间剪切文本

【英文标题】：CSS animation - cut text in middle

【发布时间】：2022-01-09 23:16:30

【问题描述】：

我在导航菜单中找到了悬停后使用动画效果的页面。

https://haimbenisty.com/

我不知道该怎么做。我已经测试了一些 CSS，但只能使笔画成为真正的文本。有谁知道该怎么做？我真的很喜欢这种效果，文字看起来像是从中间切开的。

【参考方案1】：

使用

h1:hover
  position:relative;
  display:inline-block;
    
h1:after, h1:hover
  content:'';
  position:absolute;
  width:100%;
  height:2px;
  left:0; top:17px;
  background:#fff;

<h1>EXAMPLE</h1>