嵌套的伪元素 ::before 和 ::after 不适用于 @keyframes 动画

Posted 2023-03-06

【中文标题】嵌套的伪元素 ::before 和 ::after 不适用于 @keyframes 动画

【英文标题】：Nested pseudo elements ::before & ::after not working with @keyframes animation

【发布时间】：2020-01-10 22:46:24

【问题描述】：

我正在尝试应用我在视频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，但没有奏效。我将动画直接添加到元素本身（如 .header-block-heading-primary 选择器下方注释掉的 // animation: glitch-effect 3s infinite; 所见），它工作正常，所以我被引导相信 ::before 和 ::after 元素不是在职的。在嵌套的 SCSS 中手动添加 -webkit- 也不起作用。

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

【参考方案1】：

您的动画正在运行，但您需要设置 ::after 和 ::before content:"Web Developer"。可以在sn-p中展示效果。

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

谢谢。

【讨论】：

这是编译好的 CSS。这可以根据您的代码 sn-p 在我创建的单独测试文件夹中完美运行。但是，这在 SCSS 代码中不起作用。即使按照您的建议编译的 CSS 现在具有 content: "Web Developer";，仍然没有故障影响。这非常令人困惑。不过感谢您的回答！

@Andrew Shearer 请尝试 SASS 的代码，我正在更新我的答案。

你好@KuldipKoradia。所以是的，你的 SCSS 代码对我来说也很好用。但是当我尝试在我的实际项目中使用它时，它仍然不起作用。我对此很困惑哈哈。感谢您的帮助！现在很晚了，所以我要睡在上面。如果有帮助的话，这个元素的周围容器也已经是positioned: absolute。不知道这是否会是一个促成因素，不知道它会如何。

这并不意味着您的容器位置将适用于任何标签文本，例如：

你还有一件事是你的 :after 和 :before 内容应该与

【参考方案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;