当前位置：首页 > article >正文

css 实现闪烁光标

article 2025/3/31 3:50:53

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