前言

本文参考自 光标平滑插入动画 - 插件创意|Cursor Smooth Caret Animation

效果展示：

使用方法

1. 在插件市场安装 ninja cursor 插件
2. 在 Obsidian 内添加并开启以下 css^[1]
3. enjoy it！

目前这个方案有一定缺陷：在部分插件/样式中，光标的显示位置会错位，不过实际位置是正确的

附录

/* Customization for the Ninja Cursor */ 
.x-cursor {
  position: inline block;
  background: var(--caret-color); /* Sets the Ninja Cursor Colour. */
  width: 1px; /* Sets the width of the Ninja Cursor. */ 
  transition: all 80ms !important; /* Sets the animation delay of the Ninja Cursor. Fast typers should use a higher delay to maintain the effect. */ 
  top: calc(0px - var(--header-height)); /* Ensures the cursor is inline with selected line. */ 
  --cursor-height: calc(var(font-size) - 2px); /* Sets Ninja Cursor Height. Font-Height variable used to ensure height matches current body text input. For a taller/shorter cursor alter the px. */ 
  max-height: calc(var(--font-ui-large) * 2); /* Caps the height of the Ninja Cursor to the span of two lines. Stops Ninja Cursor spanning several lines by capping it at two. It can be capped at one but the cursor is unable to change height to match headings. */ 
}

/* Hides the Default Cursor */
body:has(.x-cursor) * {
  caret-color: transparent;
}
.cm-cursorLayer {
  animation: none !important;
  display: none; 
}

/* Hides the Default Ninja Cursor Dashing Effect */ 
.cursorWrapper .x-cursor::after {
  display: none;
}

/* Applies the Caret Blinking Effect */
.cursorWrapper .x-cursor0 {
  animation: blink0 1s 1s both infinite;
}
.cursorWrapper .x-cursor1 {
  animation: blink1 1s 1s both infinite;
}

/* Keyframes for the Caret Blinking Effect */ 
@keyframes blink1 {
  0%   { opacity: 1; }
  45%  { opacity: 1; }
  50%  { opacity: 1;}
  95%  { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes blink0 {
  0%   { opacity: 1; }
  45%  { opacity: 1; }
  50%  { opacity: 1;}
  95%  { opacity: 1; }
  100% { opacity: 1; }
}