闪烁小圆点必须用css动画实现，span仅作容器；核心是@keyframes控制opacity切换，配合inline-block、border-radius和安全动画时长（1.2s），兼顾可访问性与视觉规范。
闪烁小圆点用 span 实现的核心限制
纯 HTML 无法让元素“闪烁”，span 本身只是容器，不带行为。必须配合 CSS 的 @keyframes 和 animation 才能实现视觉闪烁效果。浏览器默认不支持 blink 这类非标准属性，别试。
最简可行的 CSS 动画写法
直接给 span 加一个带透明度切换的动画，避免用 display: none（会导致重排、文字跳动）：
@keyframes blink-dot {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.blink-dot {
display: inline-block;
width: 6px;
height: 6px;
background: #ff6b6b;
border-radius: 50%;
animation: blink-dot 1.2s infinite;
}
然后在段落中这样用：
<p>请检查网络连接<span class="blink-dot"></span>，稍后重试。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>
为什么不能用 visibility: hidden 或 opacity: 0 简单切换
这两个属性虽不触发重排，但容易导致可访问性问题（屏幕阅读器可能跳过完全透明的元素），且闪烁节奏难控。更关键的是：
-
opacity: 0在动画中若起止值相同（比如都设为 0），动画会失效 - 没加
display: inline-block的span默认是 inline 元素，设宽高无效 - 没加
border-radius: 50%，圆点会变成方块
实际使用时要小心的三个点
这不是复制粘贴就能稳跑的样式，得看上下文：
- 如果父级
p设置了line-height过小，小圆点可能被裁剪，建议加vertical-align: middle - 在深色背景上用默认红色可能对比度不足，WCAG 要求至少 4.5:1，可用
color-scheme: light dark配合prefers-color-scheme媒体查询适配 - 动画太频繁（比如
0.5s）可能引发光敏性癫痫风险，W3C 建议闪烁频率不超过 3Hz；1.2s 是相对安全的折中值
真正麻烦的从来不是画个圆点，而是让它不抢眼、不干扰、不伤眼、不误读。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
