如何用CSS/JS实现评论指示器的淡入淡出循环切换动画？

问题分析 #

你当前通过伪元素::before/::after的content动画切换评论符号，但content属性无法通过过渡实现平滑切换，且单次动画结束后无循环逻辑，导致内容切换生硬。以下提供两种可行解决方案：

方案一：纯CSS实现（多伪元素+时序动画） #

核心思路是为每个评论符号单独创建伪元素，通过控制不同伪元素的opacity动画时序，实现淡入淡出+内容切换的循环效果，避免直接修改content导致的生硬跳转。

修改后的HTML #

<h1 id="about-header">
  <span id="comment-indicator-start"></span> 
  About Me 
  <span id="comment-indicator-end"></span>
</h1>

对应CSS代码 #

#about-header {
  position: relative;
}

/* 起始评论指示器的多伪元素，对应不同符号 */
#comment-indicator-start::before,
#comment-indicator-start::after,
#comment-indicator-start .symbol-1::before,
#comment-indicator-start .symbol-2::before,
#comment-indicator-start .symbol-3::before,
#comment-indicator-start .symbol-4::before {
  position: absolute;
  left: 0;
  opacity: 0;
  animation: fadeCycle 8s infinite linear;
}

#comment-indicator-start::before { content: "//"; animation-delay: 0s; }
#comment-indicator-start::after { content: "#"; animation-delay: 1.6s; }
#comment-indicator-start .symbol-1::before { content: "<!--"; animation-delay: 3.2s; }
#comment-indicator-start .symbol-2::before { content: "/*"; animation-delay: 4.8s; }
#comment-indicator-start .symbol-3::before { content: "'"; animation-delay: 6.4s; }
#comment-indicator-start .symbol-4::before { content: "--"; animation-delay: 8s; }

/* 结束评论指示器的伪元素 */
#comment-indicator-end::before,
#comment-indicator-end::after {
  position: absolute;
  right: 0;
  opacity: 0;
  animation: fadeCycleEnd 8s infinite linear;
}

#comment-indicator-end::before { content: "-->"; animation-delay: 3.2s; }
#comment-indicator-end::after { content: "*/"; animation-delay: 4.8s; }

/* 通用淡入淡出循环动画 */
@keyframes fadeCycle {
  0% { opacity: 0; }
  10% { opacity: 1; } /* 淡入 */
  20% { opacity: 1; } /* 保持显示 */
  30% { opacity: 0; } /* 淡出 */
  100% { opacity: 0; }
}

@keyframes fadeCycleEnd {
  0% { opacity: 0; }
  30% { opacity: 0; }
  40% { opacity: 1; }
  50% { opacity: 1; }
  60% { opacity: 0; }
  100% { opacity: 0; }
}

方案二：JavaScript实现（灵活可控） #

如果需要精细调整时序或动态修改评论符号，JS方案更合适，通过控制元素opacity过渡，配合定时器循环执行切换逻辑。

HTML保留原结构 #

<h1 id="about-header">
  <span id="comment-indicator-start">//</span> 
  About Me 
  <span id="comment-indicator-end"></span>
</h1>

CSS添加过渡效果 #

#comment-indicator-start, #comment-indicator-end {
  transition: opacity 0.8s ease;
}

JavaScript代码 #

// 定义起始和结束的评论符号序列
const startSymbols = ["//", "#", "<!--", "/*", "'", "--"];
const endSymbols = ["", "", "-->", "*/", "", ""];

const startEl = document.getElementById("comment-indicator-start");
const endEl = document.getElementById("comment-indicator-end");

let currentIndex = 0;

function cycleCommentIndicators() {
  // 淡出
  startEl.style.opacity = "0";
  endEl.style.opacity = "0";

  setTimeout(() => {
    // 切换内容
    currentIndex = (currentIndex + 1) % startSymbols.length;
    startEl.textContent = startSymbols[currentIndex];
    endEl.textContent = endSymbols[currentIndex];

    // 淡入
    startEl.style.opacity = "1";
    endEl.style.opacity = "1";

    // 保持显示后再次循环
    setTimeout(cycleCommentIndicators, 2000);
  }, 800); // 淡出时长与CSS过渡时间匹配
}

// 启动循环
cycleCommentIndicators();

方案对比 #

• 纯CSS方案：无需JS依赖，适合固定序列的动画，但时序调整需修改动画延迟，灵活性有限。
• JS方案：支持动态修改符号序列、自定义各阶段时长，逻辑清晰，适配复杂需求。

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