分割文字效果

Question

我试图模仿这种文本拆分的外观，我找到了 codepen.io，但它使用了 SCSS，我只在可能的情况下寻找它是 CSS。如果有人可以帮助我翻译代码或使其成为 CSS，那就太好了。我在这里先向您的帮助表示感谢。

Answer 1

虽然我不会为您写出所有代码，但我会建议一种方法：

我建议你制作两个 div 框，一个用于填充或实心文本，一个用于轮廓文本。

然后您设置color、font-family（Google Fonts 是一个很好的资源）、font-size 和font-weight，以满足您对第一个 div 的需求。

在第二个 div 上，再次将 font-family、font-size 和 font-weight 设置为相同的值，但将颜色设置为 transparent 并添加彩色 border to the text。这将模拟 codepen 中的那种轮廓效果。

哦，要让两个 div 出现在同一行，请查看 answer。

虽然这不会在两个文本之间自动拆分文本，但它是一种获得与您想要的类似效果的简单方法。