css 实现闪烁光标

要实现闪烁光标（比如文本输入框内常见的闪烁效果），可以使用 CSS 动画。下面是一个简单的方法：

代码示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS 闪烁光标</title><style>.blinking-cursor {display: inline-block;width: 2px;  /* 光标宽度 */height: 1em; /* 光标高度与文字一致 */background-color: black;  /* 光标颜色 */animation: blink 1s step-end infinite;  /* 动画：1秒闪烁一次 */}@keyframes blink {50% {background-color: transparent;  /* 闪烁时变成透明 */}}</style>
</head>
<body><p>模拟光标：<span class="blinking-cursor"></span></p>
</body>
</html>

解释

.blinking-cursor：设置一个类似光标的矩形条，高度为 1em，宽度为 2px。
animation: blink 1s step-end infinite;：
- blink 是关键帧动画名称。
- 1s 表示动画周期为 1 秒。
- step-end 表示每个动画周期末端执行变化（让闪烁看起来干脆）。
- infinite 表示无限循环。
@keyframes blink：设置光标颜色在动画中变为透明，实现“闪烁”效果。

可选改进

调节频率：可以更改 1s 为 0.5s 或其他时间来更快或更慢闪烁。
更改颜色或样式：除了 background-color，可以使用其他样式来改变光标行为，比如大小、颜色等。

也可以结合输入文本使用伪类 ::after 来模拟，使用伪类 ::after 可以更灵活地模拟输入文本后的闪烁光标。以下是一个带有伪类实现的动态光标的例子。

代码示例（伪类 + 闪烁光标）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>伪类闪烁光标</title><style>.text-container {font-family: "Courier New", Courier, monospace;  /* 等宽字体 */font-size: 24px;  /* 字体大小 */display: inline-block;position: relative;}.text-container::after {content: "";  /* 空内容，用于模拟光标 */position: absolute;right: 0;width: 2px;  /* 光标宽度 */height: 1em;  /* 光标高度等于字体高度 */background-color: black;  /* 光标颜色 */animation: blink 1s step-end infinite;  /* 闪烁动画 */}@keyframes blink {50% {background-color: transparent;  /* 50% 时光标透明，实现闪烁 */}}</style>
</head>
<body><div class="text-container">正在输入文本...</div></body>
</html>

解释

.text-container：这是包含文本的容器，它使用 position: relative; 以便让伪类 ::after 的绝对定位起作用。
伪类 ::after：
- content: "";：必须设置内容（即使为空），否则伪类无法显示。
- position: absolute;：让伪类可以相对于父元素定位。
- right: 0;：让光标始终贴紧文本右侧。
- animation: blink 1s step-end infinite;：让光标每 1 秒闪烁一次，呈现打字效果。
关键帧动画 @keyframes blink：设置光标每隔 1 秒透明一次，实现闪烁效果。