css 实现闪烁光标

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

代码示例

html 复制代码
<!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:设置光标颜色在动画中变为透明,实现"闪烁"效果。

可选改进

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

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

代码示例(伪类 + 闪烁光标)

html 复制代码
<!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 秒透明一次,实现闪烁效果。

相关推荐
excel1 小时前
webpack 检出图 第 十 节 lib/ChunkGraph.js
前端
好_快1 小时前
Lodash源码阅读-parent
前端·javascript·源码阅读
shmily ....1 小时前
前端实战:基于 Vue 与 QRCode 库实现动态二维码合成与下载功能
前端·vue.js
excel1 小时前
webpack 检出图 第 九 节 lib/ChunkGraph.js
前端
好_快1 小时前
Lodash源码阅读-pullAllWith
前端·javascript·源码阅读
好_快1 小时前
Lodash源码阅读-pullAllBy
前端·javascript·源码阅读
web守墓人6 小时前
【gpt生成-其一】以go语言为例,详细描述一下 :语法规范BNF/EBNF形式化描述
前端·gpt·golang
pink大呲花8 小时前
使用 Axios 进行 API 请求与接口封装:打造高效稳定的前端数据交互
前端·vue.js·交互
samuel9188 小时前
uniapp通过uni.addInterceptor实现路由拦截
前端·javascript·uni-app
泯泷8 小时前
JavaScript随机数生成技术实践 | 为什么Math.random不是安全的随机算法?
前端·javascript·安全