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

css 实现闪烁光标

article 2026/2/18 2:44:12

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

相关文章：

css 实现闪烁光标

要实现闪烁光标&#xff08;比如文本输入框内常见的闪烁效果&#xff09;&#xff0c;可以使用 CSS 动画。下面是一个简单的方法&#xff1a; 代码示例 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta n…...

编程日记 2026/2/12 18:51:58

AI赋能python数据处理、分析与预测操作流程

以数据集预测鱼类种类（Species）开展以下研究。数据格式如下： 以下是一个系统的分析思路及推荐的机器学习算法： 1. 数据预处理与探索性分析 缺失值与异常值处理： 检查数据完整性（如Roach类中Weight=0的记录需修正或删除）。 通过箱线图或Z-Score检测异常值，判断是否需…...

编程日记 2026/2/16 8:01:53

基于74LS192的十进制两位数正向计时器（proteus仿真）

在数字电路设计中&#xff0c;计时器是一个非常常见的应用。今天&#xff0c;我将分享一个基于 74LS192 双向计数器 的十进制两位数正向计时器电路设计。这个电路可以实现从 00 到 99 的十进制正向计数&#xff0c;并通过两个七段数码管显示结果。 最终效果如图&#xff1a; 各…...

编程日记 2026/2/15 14:17:16

#C8# UVM中的factory机制 #S8.5# 对factory机制的重载进一步思考（二）

今天我们反思，然后总结。 一 先看代码 `timescale 1ns/1ps module tb_top;class Base;function void print(int a);$display("Base: int = %0d", a);endfunction endclassclass Sub extends Base;function void print(string s);$display("Sub: string = %s&…...

编程日记 2026/2/15 16:41:11

算法-前缀和与差分

一、前缀和&#xff08;Prefix Sum&#xff09; 1. 核心思想 前缀和是一种预处理数组的方法&#xff0c;通过预先计算并存储数组的前缀和&#xff0c;使得后续的区间和查询可以在**O(1)**时间内完成。 2. 定义 给定数组 nums&#xff0c;前缀和数组 prefixSum 的每个元素 p…...

编程日记 2026/2/16 20:16:52

React(六）React过渡动画-CSS编写方式

React过渡动画 react-transition-group介绍 在开发中&#xff0c;我们想要给一个组件的显示和消失添加某种过渡动画&#xff0c;提高用户体验→可通过react-transition-group实现。React曾为开发者提供过动画插件 react-addons-css-transition-group&#xff0c;后由社区维护…...

编程日记 2026/2/14 0:12:01

第十五章:Python的Pandas库详解及常见用法

在数据分析领域&#xff0c;Python的Pandas库是一个不可或缺的工具。它提供了高效的数据结构和数据分析工具&#xff0c;使得数据处理变得简单而直观。本文将详细介绍Pandas库的基本功能、常见用法&#xff0c;并通过示例代码演示如何使用Pandas进行数据处理。最后&#xff0c;…...

编程日记 2026/2/15 18:13:06

Python自动化模块：开启高效编程新时代

一、写在前面 在数字化时代&#xff0c;自动化技术已成为提高效率、降低成本的关键手段。Python 作为一种简洁、高效且功能强大的编程语言&#xff0c;凭借其丰富的库和框架&#xff0c;在自动化领域占据了举足轻重的地位&#xff0c;成为众多开发者的首选工具之一。从简单的文…...

编程日记 2026/2/11 13:51:24

【蓝桥杯速成】| 15.完全背包

题目&#xff1a;携带研究材料 问题描述 52. 携带研究材料&#xff08;第七期模拟笔试&#xff09; 小明是一位科学家&#xff0c;他需要参加一场重要的国际科学大会&#xff0c;以展示自己的最新研究成果。他需要带一些研究材料&#xff0c;但是他的行李箱空间有限。这些研…...

编程日记 2025/4/3 23:02:19

C++：allocator类(动态数组续）

1.为什么需要 allocator&#xff1f; 在 C 中&#xff0c;动态内存管理通常通过 new 和 delete 完成&#xff1a; int* p new int; // 分配内存 构造对象 delete p; // 析构对象 释放内存 但 new 和 delete 有两个问题&#xff1a; 耦合性&#xff1a;将内…...

编程日记 2025/4/9 16:19:27

libva基础

Libva&#xff08;Lib Video Acceleration&#xff09;是一个开源的库&#xff0c;实现了 **VA-API**&#xff08;Video Acceleration API&#xff09;&#xff0c;旨在为视频处理提供跨平台的硬件加速支持。 1、核心功能与作用 硬件加速抽象层&#xff1a;Libva 作为中间层&…...

编程日记 2026/2/12 8:16:35

【C++20】format格式化输出

C20 format格式化输出 在C20之前&#xff0c;格式化能力都依赖于三方格式化库FMT&#xff0c; 而C20 标准委员会终于在C标准库引入了格式化功能&#xff0c;从使用方式和风格来看其实就是FMT库转正了 直接使用 包含<format.h>头文件既可以直接使用&#xff0c;类似pyt…...

编程日记 2025/7/9 18:05:27

c++游戏开发第一期

以后我将要发c游戏开发的教程&#xff0c;可能更得比较慢。&#xff08;目测几个星期一更&#xff09;。 今天先讲个配置编译器。 我用的是Visual studio 2022和EasyX。 安装studio&#xff1a; 首先找到下载链接&#xff08;点我&#xff09;下拉找到下面图片的东西。 下完…...

编程日记 2026/2/16 12:31:44

Elasticsearch：人工智能时代的公共部门数据治理

作者&#xff1a;来自 Elastic Darren Meiss 人工智能&#xff08;AI&#xff09;和生成式人工智能&#xff08;GenAI&#xff09;正在迅速改变公共部门&#xff0c;从理论探讨走向实际应用。正确的数据准备、管理和治理将在 GenAI 的成功实施中发挥关键作用。 我们最近举办了…...

编程日记 2026/2/12 16:29:20

Web开发：数据的加密和解密

一、常见通用术语解析 加盐&#xff1a;在密码中加入随机数据&#xff0c;提高安全性。摘要&#xff1a;固定长度的输出&#xff0c;用于数据完整性验证。加密&#xff1a;将数据转换为不可读形式&#xff0c;确保安全。撞库&#xff1a;通过暴力破解比对常见密码的攻击方式。…...

编程日记 2025/4/4 10:47:25

低功耗LPWAN模块开发指南：远距离无线通信与边缘计算融合实战‌

在远程资产追踪、野外环境监测等场景中&#xff0c;稳定可靠的长距离通信与超低功耗是系统设计的核心挑战。eFish-SBC-RK3576通过 ‌原生双UART接口 USB OTG扩展能力‌ &#xff0c;可无缝集成主流LPWAN模组&#xff08;LoRa/NB-IoT&#xff09;&#xff0c;实现“数据采集-边…...

编程日记 2026/2/16 12:08:55

RHCA核心课程技术解析5：红帽高可用性集群架构与深度实践

一、红帽高可用集群架构全景 1.1 核心组件交互逻辑 graph TD A[节点1] -->|Corosync 心跳| B[节点2] A -->|Pacemaker 资源管理| C[共享存储] B --> C D[Fencing设备] -->|STONITH| A D -->|STONITH| B C -->|GFS2锁管理| A C -->|GFS2锁管理| B 1.2 集…...

编程日记 2025/4/6 2:23:35

Python切片中的步长秘密

Python切片中的步长秘密 大家好&#xff01;今天我们来聊聊Python切片中一个有趣的话题 - 步长&#xff08;step&#xff09;。 基本格式回顾 Python切片的完整格式是: [起点:终点:步长] 但你是否注意到,很多代码里的切片都只写了起点和终点?没错,步长是可以省略的! 步长的默认…...

编程日记 2025/4/5 8:11:09

Spring Boot事务管理详解（附银行转账案例）

一、事务基础概念 事务的ACID特性&#xff1a; 原子性&#xff08;Atomicity&#xff09;&#xff1a;操作要么全部成功&#xff0c;要么全部失败一致性&#xff08;Consistency&#xff09;&#xff1a;数据在事务前后保持合法状态隔离性&#xff08;Isolation&#xff09;&…...

编程日记 2025/4/4 4:21:45

【超详细教程】2025年3月最新Pytorch安装教程（同时讲解安装CPU和GPU版本）

目录 一、前言二、pytorch简介三、安装准备工作3.1、下载Anaconda 四、判断是否有NVIDIA显卡五、安装pytorch-CPU版本六、安装pytorch-GPU版本6.1、查看CUDA显卡驱动版本6.2、安装CUDA6.3、安装CuDNN&#xff08;加速器&#xff09;6.4、安装pytorch-GPU6.5 其他方法安装注意 七…...

编程日记 2026/2/15 14:03:07

Unity光线传播体积(LPV)技术实现详解

一、LPV技术概述 光线传播体积(Light Propagation Volumes)是一种实时全局光照技术&#xff0c;通过将场景中的间接光信息存储在3D网格中&#xff0c;实现动态物体的间接光照效果。 核心优势&#xff1a; 实时性能&#xff1a;相比传统光照贴图&#xff0c;支持动态场景 硬件…...

编程日记 2025/7/14 10:15:29

Git和GitCode使用（从Git安装到上传项目一条龙）

第一步 菜鸟教程-Git教程 点击上方链接&#xff0c;完成Git的安装&#xff0c;并了解Git 工作流程&#xff0c;知道Git 工作区、暂存区和版本库的区别 第二步 GitCode官方帮助文档-SSH 公钥管理 点击上方链接&#xff0c;完成SSH公钥设置 第三步&#xff08;GitCode的官方引…...

编程日记 2026/2/6 1:41:13

通信之光纤耦合器

以下是关于光纤耦合器的详细介绍&#xff1a; 定义与原理 - 定义&#xff1a;光纤耦合器是一种能使传输中的光信号在特殊结构的耦合区发生耦合&#xff0c;并进行再分配的器件&#xff0c;也叫分歧器、连接器、适配器、光纤法兰盘。 - 原理&#xff1a;利用不同光纤面紧邻光纤芯…...

编程日记 2025/4/3 21:04:29

5G核心网（5GC）开户中，DNN（Data Network Name，数据网络名称）

在5G核心网（5GC）开户中，DNN（Data Network Name，数据网络名称）是关键概念之一，以下是关于它的详细介绍： 定义 DNN是5G网络中用于标识外部数据网络的名称，相当于4G中的APN（Access Point Name），两者功能等价。 组成 DNN由两部分组成： 网络ID（NI）：必选，至少包…...

编程日记 2026/1/30 21:54:51

OpenCV、YOLO与大模型的区别与关系

OpenCV、YOLO 和大模型的区别与关系 1. OpenCV&#xff08;Open Source Computer Vision Library&#xff09; 定位&#xff1a;开源的计算机视觉基础库。功能&#xff1a;提供传统的图像处理算法&#xff08;如图像滤波、边缘检测、特征提取&#xff09;和基础工具&#xff…...

编程日记 2026/2/12 11:41:40

虚拟电商-话费充值业务（二）话费充值对接供应商模块开发

一、对接供应商模块开发 供应商对接模块chongba_recharge_supplier主要负责的就是调用外部的供应商系统进行充值下单&#xff0c;这种调用是一种基于HTTP协议的调用。 此外在供应商对接模块中主要是实现的业务逻辑有&#xff1a; 1&#xff1a;余额或押金不足情况下的失败轮…...

编程日记 2026/2/17 15:22:11

练习题：110

目录 Python题目 题目 题目分析 需求理解 关键知识点 实现思路分析 代码实现 代码解释 函数定义&#xff1a; 计算值的总和&#xff1a; 测试函数&#xff1a; 运行思路 结束语 Python题目 题目 定义一个函数&#xff0c;接受一个字典作为参数&#xff0c;返回字…...

编程日记 2025/4/8 16:16:21

c#winform，倒鸭子字幕效果，typemonkey字幕效果，抖音瀑布流字幕效果

不废话 直接上效果图 C# winform 开发抖音的瀑布流字幕。 也是typemonkey插件字幕效果 或者咱再网上常说的倒鸭子字幕效果 主要功能 1&#xff0c;软件可以自定义添加字幕内容 2&#xff0c;软件可以添加字幕显示的时间区间 3&#xff0c;可以自定义字幕颜色&#xff0c;可以随…...

编程日记 2026/2/14 13:52:02

游戏被外挂攻破？金融数据遭篡改？AI反作弊系统实战方案（代码+详细步骤）

一、背景与需求分析 随着游戏行业与金融领域的数字化进程加速，作弊行为（如游戏外挂、金融数据篡改）日益复杂化。传统基于规则的防御手段已难以应对新型攻击，而AI技术通过动态行为分析、异常检测等能力，为安全领域提供了革命性解决方案。本文以游戏反作弊系统和金融数据安…...

编程日记 2026/2/14 21:34:29

晶晨S905L3A(B)-安卓9.0-开启ADB和ROOT-支持IPTV6-支持外置游戏系统-支持多种无线芯片-支持救砖-完美通刷线刷固件包

晶晨S905L3A(B)-安卓9.0-开启ADB和ROOT-支持IPTV6-支持外置游戏系统-支持多种无线芯片-支持救砖-完美通刷线刷固件包 适用型号&#xff1a;M401A、CM311-1a、CM311-1sa、B863AV3.1-M2、B863AV3.2-M、UNT403A、UNT413A、M411A、E900V22C、E900V22D、IP112H等等晶晨S905L3A(B)处…...

编程日记 2026/2/12 16:04:55