通过CSS中的文本编织一条线

本文改进并简化了Florin Pop的CSS文本穿线演示。原始演示存在文本重复、线长为魔法值以及依赖JavaScript等问题。本文的解决方案避免了这些问题。

HTML结构

原始演示使用Splitting.js将标题文本分割成单个字母的span元素。本文使用HTML预处理器直接生成HTML，避免了文本重复和使用额外库的需要。

<h1 aria-label="We Love to Play" role="image">
  <span class="letter">W</span>
  <span class="letter">e</span>
  <span class="letter"> </span>
  <span class="letter rev">L</span>
  <span class="letter">o</span>
  <span class="letter">v</span>
  <span class="letter">e</span>
  <span class="letter"> </span>
  <span class="letter">t</span>
  <span class="letter">o</span>
  <span class="letter"> </span>
  <span class="letter rev">P</span>
  <span class="letter">l</span>
  <span class="letter">a</span>
  <span class="letter">y</span>
</h1>

为了保证无障碍性，整个元素设置了role="image"和aria-label属性。

基本样式

使用网格布局将标题居中：

body {
  display: grid;
  place-content: center;
}

可以使用自定义字体和背景增强视觉效果。

用绝对定位的::after伪元素创建线条，厚度（高度）为$h：

$h: .125em;
$r: .5*$h;

h1 {
  position: relative;

  &::after {
    position: absolute;
    top: calc(50% - #{$r});
    right: 0;
    height: $h;
    border-radius: 0 $r $r 0;
    background: crimson;
    width: calc(50vw   50%); /* 计算线条宽度 */
    animation: slide 2s ease-out 1s backwards; /* 添加动画 */
  }
}

@keyframes slide {
  0% { transform: translateX(-100%); }
}

线条宽度通过calc(50vw 50%)计算，保证线条从视口左侧延伸到标题文本右侧。

线条上下穿插

通过随机分配.over类来控制字母在线条上方或下方显示：

.over {
  position: relative;
  z-index: 1;
}

使用z-index而不是translateZ，兼容性更好，实现更简单。

动画效果

动画使用@keyframes slide实现，线条从左侧滑入。animation-fill-mode: backwards保证动画开始前线条处于初始位置。

3D效果

为了实现线条穿过每个字母的效果，需要使用3D变换：

1. 在标题元素上设置transform-style: preserve-3d。
2. 使用.rev类控制字母绕Y轴旋转方向。
3. 设置display: flex和white-space: pre解决inline元素变换无效和空格元素宽度为零的问题。
4. 使用scalex缩放字母，抵消Y轴旋转带来的水平压缩。

$a: 2deg;
$f: 1/cos($a);

.letter {
  white-space: pre;
  transform: rotateY($a) scaleX($f);
}

.rev {
  transform: rotateY(-$a) scaleX($f);
}

最终效果实现线条穿过每个字母，并带有动画效果。需要注意的是，字体选择会影响最终效果。

以上是通过CSS中的文本编织一条线的详细内容。更多信息请关注PHP中文网其他相关文章！