用途

设置复习的倒计时提醒，评估自己回答的流畅性，也能防止走神太久而不自知。

增加趣味性。

方法

找到需要修改的笔记模板，进入模板的代码界面。

找到如下图所示的位置，该标签表示分割线。

将分割线替换成如下图所示的代码。

代码如下，小乌龟爬行所需的时间可以自定义，即下方三处“10s”。当然，你也可以把小乌龟换成别的 Emoji 表情，例如 兔子🐇、老虎🐅、蛇🐍等等。

<div class="turtle-hr-container">
        <hr  id="answer" class="timed-hr" style="animation-duration: 10s;">
        <div class="turtle turtle-left" style="animation-duration: 10s;">🐢</div>
        <div class="turtle turtle-right" style="animation-duration: 10s;">🐢</div>
</div>

再在背面以下添加如下图所示的代码。

代码如下。

<style>
    .turtle-hr-container {
        position: relative;
        width: 100%;
        height: 40px;
    }

    hr.timed-hr {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 0;
        height: 2px;
        background-color: black;
        border: none;
        animation: expandHr linear forwards;
    }

    .turtle {
        font-size: 24px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .turtle-left {
        left: 50%;
        transform: translate(-50%, -50%);
        animation: moveLeft linear forwards;
    }

    .turtle-right {
        right: 50%;
        transform: translate(50%, -50%) scaleX(-1); /* 水平翻转乌龟图标 */
        animation: moveRight linear forwards;
    }

    @keyframes expandHr {
        from {
            width: 0;
        }
        to {
            width: 100%;
        }
    }

    @keyframes moveLeft {
        from {
            left: 50%;
        }
        to {
            left: 0;
        }
    }

    @keyframes moveRight {
        from {
            right: 50%;
        }
        to {
            right: 0;
        }
    }
</style>