如何在Quarto RevealJS幻灯片中插入指向指定文字的箭头？

要实现指定文字的淡入箭头效果，你可以结合HTML元素、CSS样式和RevealJS的fragment动画功能来完成，以下是两种实用方案：

方案1：CSS伪元素生成箭头 + 淡入动画 #

通过CSS伪元素快速生成箭头，搭配RevealJS的fragment类实现淡入效果：

---
title: "Insert shapes in revealjs Quarto"
format: revealjs
---

## Slide

<style>
.arrow-wrap {
  position: relative;
  display: inline-block;
}
/* 生成指向文字的箭头 */
.arrow-wrap.fragment.fade-in::after {
  content: "";
  position: absolute;
  top: 120%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 12px solid #2563eb;
  animation: fadeIn 0.5s ease forwards;
}
</style>

I would like to fade in an arrow to this <span class="arrow-wrap fragment fade-in">**word**</span>

方案2：SVG自定义箭头 + 淡入动画 #

如果需要更复杂的箭头样式，用SVG实现更灵活，同样配合fragment控制显示时机：

---
title: "Insert shapes in revealjs Quarto"
format: revealjs
---

## Slide

<style>
.target-box {
  position: relative;
  display: inline-block;
}
.custom-arrow {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.5s ease;
}
/* 幻灯片切换到当前片段时显示箭头 */
.target-box.fragment.current-fragment .custom-arrow {
  opacity: 1;
}
</style>

I would like to fade in an arrow to this 
<span class="target-box fragment">
  **word**
  <svg class="custom-arrow" width="22" height="16" viewBox="0 0 22 16">
    <path d="M11,0 L2,12 L6,12 L6,16 L16,16 L16,12 L20,12 Z" fill="#dc2626"/>
  </svg>
</span>

关键说明 #

• fragment是RevealJS内置类，fade-in是默认的淡入动画类型，支持自定义动画时长
• 通过relative+absolute定位箭头，可修改top、left等属性调整箭头与文字的相对位置
• 可自行修改CSS颜色、尺寸参数，或SVG路径来调整箭头的样式

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