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;
  }
}

谢谢。

Answer 2

我明白了！标题部分的背景图片与::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动画配合使用

2 个答案: