嵌套的伪元素 ::before & ::after 不使用@keyframes 动画

Question

我正在尝试应用我在这个视频中看到的很酷的 "Glitch Effect" here:

但是，我似乎无法让这个动画工作。这是我尝试将效果应用到的标题元素：

<h1 class="header-block-heading-primary">Web Developer</h1>

这里是SCSS:

.header-block-heading-primary {
  // animation: glitch-effect 3s infinite;
  position: relative;

  &::before,
  &::after  {
    position: absolute;
    left: 0;
    top: 0;

    content: "";
    display: block;
    height: 100%;
        width: 100%;
        z-index: -1;
  }

  &::before {
    color: red;
    animation: glitch-effect 3s infinite;
  }

  &::after {
    color: blue;
    animation: glitch-effect 2s infinite;
  }
}

这是动画：

@keyframes glitch-effect {
  0% {
    left: -3px;
    top: -3px;
  }

  25% {
    left: 3px;
    top: 0px;
  }

  50% {
    left: -2px;
    top: 3px;
  }

  75% {
    left: 2px;
    top: -2px;
  }

  100% {
    left: 0px;
    top: -3px;
  }
}

这是输出的 CSS:

.header-block-heading-primary {
  position: relative;
}

.header-block-heading-primary::before,
.header-block-heading-primary::after {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  z-index: -1;
}

.header-block-heading-primary::before {
  color: red;
  -webkit-animation: glitch-effect 3s infinite;
  animation: glitch-effect 3s infinite;
}

.header-block-heading-primary::after {
  color: blue;
  -webkit-animation: glitch-effect 2s infinite;
  animation: glitch-effect 2s infinite;
}

我遵循了与教程相同的设置，甚至引用了我的一些旧项目来查看 ::before 和 ::after 的使用，它们使用几乎相同的代码工作得很好（对于伪元素）。

我只试过单曲 semi-colon，所以 :before & :after，但没用。我将动画直接添加到元素本身（如 .header-block-heading-primary 选择器下方注释掉的 // animation: glitch-effect 3s infinite; 所示），它工作正常所以我被引导相信 ::before 和::after 个元素不工作。同样在嵌套的 SCSS 中手动添加 -webkit- 也不起作用。

我查看了该站点上的其他多个帖子，但找不到可以帮助我解决此问题的答案。因此，我们将不胜感激任何对此的帮助！

Answer 1

您的动画正在运行，但您需要设置 ::after 和 ::before content:"Web Developer"。你可以在片段中显示效果。

.header-block-heading-primary {
  position: relative;
}

.header-block-heading-primary::before,
.header-block-heading-primary::after  {
  position: absolute;
  left: 0;
  top: 0;
  content: "Web Developer";
  display: block;
  height: 100%;
  width: 100%;
  z-index: -1;
}

.header-block-heading-primary::before {
  color: red;
  animation: glitch-effect 3s infinite;
}

.header-block-heading-primary::after {
  color: blue;
  animation: glitch-effect 2s infinite;
}
@keyframes glitch-effect {
  0% {
    left: -3px;
    top: -3px;
  }

  25% {
    left: 3px;
    top: 0px;
  }

  50% {
    left: -2px;
    top: 3px;
  }

  75% {
    left: 2px;
    top: -2px;
  }

  100% {
    left: 0px;
    top: -3px;
  }
}

<h1 class="header-block-heading-primary">Web Developer</h1>

这是 sass 在我的页面上有效的代码，请尝试此代码。

.header-block-heading-primary {
  position: relative;
  &::before,
  &::after  {
    position: absolute;
    left: 0;
    top: 0;
    content: "Web Developer";
    display: block;
    height: 100%;
    width: 100%;
    z-index: -1;
  }
  &::before {
    color: red;
    animation: glitch-effect 3s infinite;
  }
  &::after {
    color: blue;
    animation: glitch-effect 2s infinite;
  }
}
@keyframes glitch-effect {
  0% {
    left: -3px;
    top: -3px;
  }

  25% {
    left: 3px;
    top: 0px;
  }

  50% {
    left: -2px;
    top: 3px;
  }

  75% {
    left: 2px;
    top: -2px;
  }

  100% {
    left: 0px;
    top: -3px;
  }
}

谢谢。

Answer 2

我明白了！ header 部分的背景图片与 ::before 和 ::after 冲突，所以我只需要在标题中添加更高的 z-index 就可以了！

.header-block-heading-primary {
  position: relative;
  z-index: 20;

  &::before {
    position: absolute;
    left: 0;
    top: 0;

    height: 100%;
    width: 100%;

    content: "Web Developer";
    z-index: -1;
  }

  &::after {
    content: "Web Developer";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }

  &::before {
    color: #ff00c1;
    animation: glitch-effect 3s infinite;
  }

  &::after {
    color: #3498db;
    animation: glitch-effect 2s infinite;
  }

  &:hover::before {
    animation: glitch-effect 1s infinite;
  }

  &:hover::after {
    animation: glitch-effect 2s infinite;
  }
}

嵌套的伪元素 ::before & ::after 不使用@keyframes 动画

Nested pseudo elements ::before & ::after not working with @keyframes animation

css

animation

sass

pseudo-element