Neat Annotations: 基于纯 CSS 的网页手绘标注

今天看到一个有意思的 CSS 库 neat-annotations，用来给网页进行手绘标注。样式如下：

docs/specs/cli.md

- [ ] CLI-042 Add export command #cli !high @blocked_by:CLI-041

Write task output as JSON for scripts and agents

官网的使用说明很详细，下面只是进行转述，顺便试一下手~

Installation

Get the CSS

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/syabro/neat-annotations/neat-annotations.css">

Optional: handwritten font

<link href="https://fonts.googleapis.com/css2?family=Shantell+Sans:wght@400;500;600&display=swap" rel="stylesheet">

Directions

target

Follow compass directions for arrows.

target

<span
class=“ann ann-n”
data-note=“.ann-n”
>
target
</span>

Colors

Five colors and an animated rainbow, plus a warm-gray default.

plain

amber

blue

green

red

purple

rainbow

<span
class=“ann ann-n ann-red”
data-note=“ann-red”
>
red
</span>

Custom colors

Set any CSS color directly with —ann-color.

black

hot pink

cyan

<span
class=“ann ann-n”
data-note=”…”
style=“—ann-color: #00c2d7”
>
cyan
</span>

Highlight only

Use it as a text marker: omit data-note to hide the arrow and label.

Ship when the migration guide is ready.

<p>
Ship when the
<span class=“ann ann-amber”>
migration guide
</span>
is ready.
</p>

Stack annotations

Nest two annotations to point at one target from different sides.

<span
class=“ann ann-w ann-blue ann-no-mark”
data-note=“assigned to Alice”>
<span class=“ann ann-e ann-red” data-note=“P2 bug”>login flow</span>
</span>

Long notes

Notes wrap naturally; set —ann-label-max-width to choose the line length.

The release candidate is ready for review.

<span
class=“ann ann-n ann-blue”
data-note=“Confirm the release notes, migration guide, and rollback steps before publishing.”
style=“—ann-label-max-width: 220px”>
…
</span>