CSS自定义caret光标七色动画实例页面

CSS代码：

@keyframes custom-blink {
  0%, 50% { caret-color: transparent; }
  50%, 100% { caret-color: hsl(calc(3.6 * var(--seed)), 100%, 50%); }
}

@property --seed {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}

@keyframes seed {
  from { --seed: 0; }
  to { --seed: 100; }
}

.custom-caret {
  caret-animation: manual; /* 关闭默认的光标闪烁 */
  caret-color: blue;
  animation: custom-blink 1.5s infinite step-end, seed calc(1.5s * 7) both infinite linear;
}

HTML代码：

<input placeholder="focus me" class="custom-caret" />