原生 input/textarea 无法控制光标闪烁节奏，仅支持 caret-color 改色；需用 contenteditable + 自绘光标（如绝对定位 span）配合 animation 实现可控闪烁动画。
用 CSS caret-color 和 animation 控制光标样式与闪烁节奏
原生输入框的光标（caret）默认不支持自定义动画，但现代浏览器已支持 caret-color 设置颜色，配合 animation 可以模拟“闪烁”——实际是控制光标所在元素（如 contenteditable 区域里的伪光标）的显隐。真正在 <input> 或 <textarea></textarea> 里改闪烁频率不可行，因为浏览器不暴露该行为的控制权。
所以真正能动手的地方只有两类：一是改颜色（caret-color），二是自己画一个“假光标”并让它动起来。
-
caret-color支持所有主流浏览器（Chrome 57+、Firefox 61+、Safari 11.1+），但仅限颜色，不能调速或隐藏 - 想控制闪烁间隔？必须放弃原生光标，用
contenteditable="true"+div+ 自绘光标 - 若强行对
<input>加animation动画（比如 opacity 闪动），会导致焦点丢失、输入中断，千万别试
用 contenteditable 模拟可动画光标（推荐方案）
这是唯一稳定可控的方式：把文本容器设为 contenteditable，监听输入，再用一个绝对定位的 <span></span> 模拟光标，并通过 @keyframes 控制它的 opacity。
关键点在于光标要始终贴在文字末尾，且不干扰选中和输入逻辑：
- 光标
<span class="cursor">|</span>必须放在contenteditable容器内部最右位置 - 每次
input或keydown后，用getSelection().focusOffset判断光标位置，动态调整.cursor的left值（需结合getBoundingClientRect()或range.getClientRects()） - 更轻量的做法：只在内容末尾固定显示光标（适合单行、无编辑需求的打字机效果），此时直接用
animation: blink 1s step-end infinite;
@keyframes blink {
50% { opacity: 0; }
}
.cursor {
display: inline-block;
width: 2px;
background: #007bff;
animation: blink 0.8s step-end infinite;
}
input 元素里为什么不能直接改光标闪烁？
因为光标是浏览器 UI 层的渲染行为，不是 DOM 节点，也不响应 CSS 动画属性（如 opacity、transform）。你给 <input> 加 animation，只会动整个输入框，不是光标本身。
常见误操作及后果：
- 对
input::after伪元素加动画 → 无效，input不支持::before/::after - 用
setInterval频繁focus()/blur()模拟闪烁 → 破坏输入体验，移动端键盘反复弹起 - 覆盖
caret-color: transparent再用边框模拟 → 光标消失后无法判断当前插入位置，用户会迷路
兼容性与性能注意点
自绘光标在 Safari 上可能因 contenteditable 的排版重绘延迟出现错位；在 iOS 上，软键盘唤起时 getSelection() 常返回错误 offset。别依赖像素级精确定位。
- 如果只是做静态打字机效果（比如介绍页 headline），用
textContent逐字添加 + 固定光标即可，不用实时追踪光标位置 - 避免在
input事件里频繁调用getClientRects()，它触发同步布局计算，滚动或长文本下易卡顿 - 真需要高保真模拟？用
requestAnimationFrame节流光标重定位逻辑，而不是每个keydown都算一次
最常被忽略的是：光标动画不是纯视觉装饰，它承担着“当前可输入位置”的提示功能。动得不对，用户就不知道该往哪打字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
