css - 嵌套的伪元素::之前&::不使用@keyframes 动画之后

Question

我正在尝试应用我在该视频中看到的很酷的“故障效果”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 的使用，它们工作正常使用几乎相同的代码(对于伪元素)就好了。

我只尝试了单个分号，所以 :before & :after，但没有用。我将动画直接添加到元素本身(正如注释掉的 //animation: glitch-effect 3s infinite; 在 .header-block-heading-primary 下看到的那样选择器)，它工作正常，所以我被引导相信 ::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;
  }
}

谢谢。