CSS鼠标悬停触发Glitch文字动画失效问题求助

以下是你的代码存在的问题及修复方案：

问题分析 #

1. 伪元素无内容：:before/:after伪元素必须通过content属性指定内容才能渲染，原代码缺失此属性，导致伪元素无法显示。
2. RGBA语法错误：.glitch-text:hover:after中的rgba(0, 1, 0, )多了一个多余逗号，属于无效CSS语法，直接导致该样式失效。
3. 定位基准错误：.glitch-text未设置position: relative，伪元素的绝对定位会相对于外层.bg容器，导致位置偏移，动画效果异常。
4. 光标变为I型：文本包含单引号，浏览器默认将其识别为可选中文本，添加user-select: none可禁用文本选择，恢复默认光标。

修复后的完整代码 #

HTML代码（修正viewport语法错误） #

<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" />
  <meta name="author" content="team" />
  <title>Unnamed Project</title>
  <link rel="stylesheet" type="text/css" href="glitch2.css" />
  <link rel="stylesheet" type="text/css" href="sounds.css" />
  <link rel="stylesheet" href="https://use.typekit.net/iyx6mdm.css" />
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
    integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
    crossorigin="anonymous"
    referrerpolicy="no-referrer"
  />

</head>

<body>
<ul class="menu">
  <li>
    <a href="index.html">Home</a>
  </li>
  <li>
    <a href="second_page.html">About</a>
  </li>
  <li>
    <a href="glitch.html">Glitch</a>
  </li>
</ul>
<div class="bg">

<div class="text-style">
<div class="glitch-text">'11:11'</div>
</div>

</body>
</html>

CSS代码（修复所有问题点） #

*, *:before, *:after {
  box-sizing: border-box;
  outline: none;
}

.text-style {
  font-family: 'Times New Roman', sans-serif;
  font-size: 26px;
  font-weight: bold;
  line-height: 1.5;
  color: white;
}

.bg {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: black;
}

.glitch-text {
  font-size: 200px;
  position: relative; /* 设置定位基准 */
  user-select: none; /* 禁用文本选择，避免I型光标 */
}

.glitch-text:hover:before,.glitch-text:hover:after {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: -1;
  content: "'11:11'"; /* 添加伪元素内容 */
  top: 50%;
  left: 50%;
}

.glitch-text:hover:before {
  color: rgba(233, 30, 99, 0.8);
  animation: distort1 300ms linear infinite;
}

.glitch-text:hover:after {
  color: rgba(0, 1, 0, 0.8); /* 修复RGBA语法错误 */
  animation: distort2 300ms linear infinite;
}

@keyframes distort1 {
  0% {
    transform: translate(-50%, -50%) translate(0, 0);
  }
  12.5% {
    transform: translate(-50%, -50%) translate(5%, 0);
  }
  25% {
    transform: translate(-50%, -50%) translate(10%, 0);
  }
  37.5% {
    transform: translate(-50%, -50%) translate(10%, 5%);
  }
  50% {
    transform: translate(-50%, -50%) translate(10%, 10%);
  }
  62.5% {
    transform: translate(-50%, -50%) translate(5%, 10%);
  }
  75% {
    transform: translate(-50%, -50%) translate(0, 10%);
  }
  87.5% {
    transform: translate(-50%, -50%) translate(0, 5%);
  }
  100% {
    transform: translate(-50%, -50%) translate(0, 0);
  }
}

@keyframes distort2 {
  0% {
    transform: translate(-50%, -50%) translate(0, 0);
  }
  12.5% {
    transform: translate(-50%, -50%) translate(0, 5%);
  }
  25% {
    transform: translate(-50%, -50%) translate(0, 10%);
  }
  37.5% {
    transform: translate(-50%, -50%) translate(-5%, 10%);
  }
  50% {
    transform: translate(-50%, -50%) translate(-10%, 10%);
  }
  62.5% {
    transform: translate(-50%, -50%) translate(-10%, 5%);
  }
  75% {
    transform: translate(-50%, -50%) translate(-10%, 0);
  }
  87.5% {
    transform: translate(-50%, -50%) translate(-5%, 0);
  }
  100% {
    transform: translate(-50%, -50%) translate(0, 0);
  }
}

另外，原动画中直接修改top/left属性会导致重排性能较差，修复时将位移逻辑改为通过transform实现，性能更优，同时保证动画效果一致。

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