如何在reveal.js幻灯片中添加<blink>闪烁效果？

别担心，新手问题完全值得问！我来一步步帮你搞定这个闪烁效果，你遇到的问题大概率是样式引入或者HTML使用的小细节没做好，我们来逐一排查：

第一步：确保自定义CSS正确加载 #

首先，你的CSS代码本身是没问题的，但要保证它能被reveal.js正确读取。最稳妥的方式是在项目的index.html文件里，把自定义样式放在默认的reveal主题样式之后，这样不会被默认样式覆盖：

<head>
  <!-- 原有reveal.js基础样式 -->
  <link rel="stylesheet" href="css/reveal.css">
  <link rel="stylesheet" href="css/theme/black.css"> <!-- 你的主题样式 -->
  
  <!-- 添加你的自定义闪烁样式 -->
  <style>
    .blink {
      /* 现代浏览器已经不需要前缀，简化写法 */
      animation: blink 1s step-end infinite;
    }

    @keyframes blink {
      67% { opacity: 0; }
    }
  </style>
</head>

如果你习惯把样式单独放在CSS文件里，比如custom.css，那就在index.html里引入这个文件：

<link rel="stylesheet" href="css/custom.css">

第二步：在幻灯片中正确使用.blink类 #

接下来要确保你在幻灯片内容里正确给需要闪烁的元素加上这个类。比如：

<section>
  <h2 class="blink">这是一个闪烁的标题</h2>
  <p>普通文本不会闪烁，<span class="blink">但这段文字会闪烁</span></p>
</section>

可能的问题排查 #

如果还是没效果，可以检查这几点：

• 类名拼写：确保你写的是class="blink"而不是拼写错误（比如blinks或者blinkk）
• 样式优先级：如果你的元素被其他高优先级样式覆盖，可以尝试给opacity加上!important（尽量少用，但临时排查很有用）：

  @keyframes blink {
    67% { opacity: 0 !important; }
  }
  

• 浏览器兼容性：虽然现代浏览器不需要前缀，但如果是旧版本浏览器，可以把你原来写的前缀加回去（不过现在大部分场景不需要了）

这样调整之后，你的闪烁效果应该就能正常工作啦！

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