如何实现网站施工页面字母条纹特效？CSS/JS实现求助

嘿，作为网页设计新手，其实用纯CSS就能轻松做出你想要的字母条纹效果，完全不用复杂的JS！而且这种效果特别适合施工页面的氛围，下面给你两种方案：静态条纹和动态滚动条纹，你可以按需选择～

一、静态条纹效果 #

先写基础的HTML结构，比如施工页面的标题：

<h1 class="striped-text">网站施工中，敬请期待</h1>

然后用CSS实现条纹效果，核心是利用background-clip: text让背景只在文字区域显示，配合线性渐变做条纹：

.striped-text {
  /* 定义条纹的渐变背景：这里是黑白斜条纹，你可以换颜色和角度 */
  background: linear-gradient(45deg, #333 25%, #fff 25%, #fff 50%, #333 50%, #333 75%, #fff 75%, #fff);
  /* 设置条纹的宽度，数值越小条纹越细 */
  background-size: 20px 20px;
  /* 关键属性：让背景只裁剪到文字区域 */
  -webkit-background-clip: text;
  background-clip: text;
  /* 把文字本身设为透明，这样背景条纹就能透出来 */
  color: transparent;
  /* 可选：给文字加个描边，让条纹更清晰，适合浅色背景 */
  -webkit-text-stroke: 1px #333;
}

关键属性解释： #

• linear-gradient：第一个参数是条纹角度（45deg是斜条纹，90deg是竖条纹，0deg是横条纹），后面的百分比控制每个条纹的宽度。
• background-size：控制条纹的粗细，数值越大条纹越宽。
• background-clip: text：这是实现文字条纹的核心，加-webkit-前缀是为了兼容老版本浏览器。

二、动态滚动条纹效果（更适合施工页面） #

如果想要更有动感的效果，比如条纹慢慢滚动，只需要加个CSS动画就行：

.striped-text {
  background: linear-gradient(45deg, #ff6b35 25%, #fff 25%, #fff 50%, #ff6b35 50%, #ff6b35 75%, #fff 75%, #fff);
  background-size: 20px 20px;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px #ff6b35;
  /* 添加动画 */
  animation: stripe-scroll 2s linear infinite;
}

/* 定义动画：让背景位置横向滚动 */
@keyframes stripe-scroll {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 20px 20px;
  }
}

自定义技巧： #

• 替换linear-gradient里的颜色，比如用施工常用的橙黑、黄黑配色，更贴合主题。
• 调整animation的时长（比如把2s改成5s），控制条纹滚动的速度。
• 修改background-size的数值，改变条纹的粗细。

这样你就能快速做出适合施工页面的字母条纹效果啦，完全不用JS，新手也能轻松上手～

内容的提问来源于stack exchange，提问作者Rsl 2991