要實現閃爍光標（比如文本輸入框內常見的閃爍效果），可以使用 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 秒透明一次，實現閃爍效果。
![[力扣每日一練]關于MySQL和pandas的正則表達式應用](http://pic.xiahunao.cn/[力扣每日一練]關于MySQL和pandas的正則表達式應用)
