文本模版：文字描边

预览效果

<div class="container-text-stroke">
  <svg class="text-stroke" viewBox="0 0 500 150" width="100%" height="100%">
    <text class="text" x="0" y="80">VIEW ROOM</text>
  </svg>
</div>

.container-text-stroke {
  display: flex;
  justify-content: center;
  block-size: min(10rem, 23vw);
}

.container-text-stroke .text-stroke {
  font-size: 80px;
  letter-spacing: 4px;
  fill: none;
  stroke: #000;
  stroke-width: 2;
  stroke-dasharray: 100%;
  animation: textStrokeAnim 3s linear both;
}

.container-text-stroke .text-stroke:hover {
  animation-iteration-count: 10;
}

@keyframes textStrokeAnim {
  0% {
    stroke-dasharray: 100%;
    fill: #0000;
  }
  95% {
    stroke-dasharray: 0%;
    fill: #0000;
  }
  100% {
    stroke-dasharray: 0%;
    fill: #9b9dad;
    filter: drop-shadow(2px 2px 10px #0007);
  }
}

代码解析

HTML 结构

这个文字描边效果的HTML结构使用了SVG技术：

1. 容器元素 (div.container-text-stroke)：作为整个文本效果的外层容器，提供居中对齐的布局环境。
2. SVG元素 (svg.text-stroke)：使用SVG来绘制文本，通过viewBox属性定义了可见区域的坐标系统。
3. 文本元素 (text.text)：SVG中的文本元素，包含要显示的文本内容，并通过x和y属性定义了文本在SVG画布中的位置。

CSS 实现原理

1. 布局设置：容器使用flex布局实现内容居中对齐，通过block-size: min(10rem, 23vw)设置响应式大小。
2. 基础SVG文本样式：
   • 设置fill: none使文本填充色为透明
   • 使用stroke: #000和stroke-width: 2创建黑色的2像素描边
   • 设置字体大小、字母间距等基础文本样式
3. 描边动画效果：
   • 通过stroke-dasharray: 100%设置初始描边样式
   • 使用@keyframes textStrokeAnim定义了描边动画
   • 动画使描边从完整显示到逐渐消失，同时文本逐渐填充颜色
4. 交互效果：当鼠标悬停在文本上时，通过:hover伪类将动画迭代次数设置为10次，提供交互反馈
5. 最终视觉效果：在动画结束时，文本填充为灰色并添加了阴影效果

使用方法

1. 复制 HTML 结构：将 HTML 代码块中的容器和SVG文本结构复制到你的网页中。
2. 添加 CSS 样式：将 CSS 代码块中的样式规则复制到你的样式表中。
3. 修改文本内容：将SVG中的text元素内容修改为你想要显示的文本。
4. 自定义视觉效果：可以通过修改描边颜色、宽度、动画速度、文本填充颜色等参数来自定义文字描边效果的外观。

浏览器兼容性

• 主流浏览器：此文字描边效果在 Chrome、Firefox、Safari 和 Edge 等现代浏览器中具有良好的兼容性。
• IE 浏览器：SVG 和 CSS 动画在较旧版本的 Internet Explorer 中可能存在兼容性问题，需要进行额外的兼容性处理。
• 性能考虑：SVG 文本动画效果通常不会对性能产生显著影响，但在包含多个复杂 SVG 动画的页面上，建议进行性能测试和优化。