CSS @keyframes light霓虹文字动画效果不生效问题求助

• CSS选择器.TextNeon h1匹配不到对应元素：现有代码中.TextNeon是空白容器，需要添加动画的<h1>、<p>都写在了该容器外部，导致动画规则没有绑定到目标元素
• HTML存在冗余的闭合</div>标签，属于语法错误
• 现有动画的霓虹色调为青蓝色，和全局设置的文字绿色#A4FC52不匹配，可按需调整实现风格统一

快速生效方案（无需调整HTML） #

直接修改CSS中的动画绑定选择器，把.TextNeon h1替换为.TextColo，即可直接匹配现有h1元素，动画立即生效。

标准结构修正方案 #

1. 修正HTML结构 #

把文字内容放到.TextNeon容器内部，删除多余的闭合标签：

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
  <title>Text light Effect</title>
</head>
<body>
  <div class="mainbox">
    <div class="TextNeon">
      <p> Pure  C S S  Effects</p>
      <h1>CSS EFFECTS</h1>
    </div>
  </div> 
</body>
</html>

2. 可选：调整动画色调适配绿色主题 #

把@keyframes light中所有的#00fff2替换为#A4FC52，即可实现绿色霓虹效果，也可以自定义其他色值调整霓虹颜色。

3. 可选：给p标签也添加霓虹效果 #

新增CSS规则让p标签同步生效动画：

.TextNeon p {
  animation: light 1.5s ease-in-out infinite alternate;
}

内容的提问来源于stack exchange，提问作者João Firmino