neat-annotations 介绍

如果你需要在网页中有一些需要标注的地方， 可以用用它，可以试试这个叫 neat-annotations 的手写风格的箭头标注库。使用方式也很简单，我们一起来看看吧。

我们要做的就只是引入对应的 css 文件即可。 具体文件可以在 neat-annotations.css 找到。

在引入后，就可以通过标签的 class 和 data-note attribute 来控制显示的样子。

The dashboard updates <span class="ann ann-n ann-amber" data-note="no refresh needed">in real time</span>

这里我们可以做一点简单的解释

• 外层标签

  这里的内容就是箭头指向的内容

  • class：
    1. ann 这个是必须的
    2. ann-xx 这里分两种情况
    • ann-n · ann-ne · ann-e · ann-se · ann-s · ann-sw · ann-w · ann-nw 时表示方位

      

    • ann-amber · ann-blue · ann-green · ann-red · ann-purple · ann-rainbow 时表示颜色，当然你也可以使用 --ann-color css 变量自定义颜色

      

  • data-note：这里就是箭头处展示的内容

仓库地址