要实现闪烁光标（比如文本输入框内常见的闪烁效果），可以使用 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 秒透明一次，实现闪烁效果。