河北企业建站系统信息怎么做网站凡科
要实现闪烁光标（比如文本输入框内常见的闪烁效果），可以使用 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 秒透明一次，实现闪烁效果。