CSS标题闪烁光标动画失效问题求助

你的代码核心问题是CSS语法错误和动画绑定位置错误，以下是具体修正方案：

问题拆解 #

1. animation 属性直接写在全局，没有绑定到 header h1 选择器中，导致动画根本没作用到目标元素
2. 初始设置的 border-right 颜色 #d11313，和动画里的颜色冲突，会干扰闪烁效果
3. 默认h1是块级元素，border-right会撑满整行高度，看起来不像光标，需要调整显示模式

修正后的完整代码 #

index.html（需补充CSS引入） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 必须添加这行，确保HTML能读到CSS文件 -->
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <header>
        <h1>Sample header</h1>
    </header>
  </body>
</html>

index.css（修正后） #

header h1{
    font-size: 70px;
    font-weight: 500;
    /* 改成行内块，让光标边框只跟着文字宽度走 */
    display: inline-block;
    /* 初始border设为透明，避免和动画冲突 */
    border-right: 4px solid transparent;
    /* 将animation移到选择器内部，绑定到h1 */
    animation: cursor 1s infinite step-end;
}

@keyframes cursor {
    0%, 100% {
        border-color: transparent;
    }
    50% {
        border-color: #d11313; /* 用你原本的红色光标，保持视觉统一 */
    }
}

关键修改说明 #

• 把 animation 属性放到 header h1 的大括号内，确保动画能作用到标题元素
• 添加 display: inline-block，让光标边框只显示在文字右侧，符合预期的光标形态
• 初始border颜色设为透明，避免和动画中的颜色冲突
• 动画里的光标颜色统一用你原来的#d11313，保持视觉一致性

修改后刷新Live Server页面，就能看到文字右侧的红色光标无限闪烁的效果了。

内容的提问来源于stack exchange，提问作者NAVI