html - 问题居中动画

Question

我的故障动画是左对齐的，如果调整窗口大小，它会留在浏览器窗口的左侧，将正常的 WELCOME 文本留在中间。之前和之后的动画偏移了 2px 以使其看起来有故障。我怎样才能将故障“WELCOME”置于正常的“WELCOME”文本之上，并且仍然保持前后动画彼此偏移 2px？

body {
  background-color: #4b4b4b;
  font-family: arial;
}

.glitch {
  color: white;
  font-size: 100px;
}

.glitch {
  position: relative;
}

.glitch:after {
  animation: glitch-animation 2s infinite linear alternate-reverse;
  background: #4b4b4b;
  clip: rect( 0, 900px, 0, 0);
  color: white;
  content: attr( data-text);
  left: 2px;
  overflow: hidden;
  position: absolute;
  text-shadow: -1px 0 red;
  top: 0;
}

.glitch:before {
  animation: glitch-animation-2 3s infinite linear alternate-reverse;
  background: #4b4b4b;
  clip: rect( 0, 900px, 0, 0);
  color: white;
  content: attr( data-text);
  left: -2px;
  overflow: hidden;
  position: absolute;
  text-shadow: 1px 0 blue;
  top: 0;
}

@keyframes glitch-animation {
  0% {
    clip: rect(42px, 9999px, 44px, 0);
  }
  5% {
    clip: rect(12px, 9999px, 59px, 0);
  }
  10% {
    clip: rect(48px, 9999px, 29px, 0);
  }
  15.0% {
    clip: rect(42px, 9999px, 73px, 0);
  }
  20% {
    clip: rect(63px, 9999px, 27px, 0);
  }
  25% {
    clip: rect(34px, 9999px, 55px, 0);
  }
  30.0% {
    clip: rect(86px, 9999px, 73px, 0);
  }
  35% {
    clip: rect(20px, 9999px, 20px, 0);
  }
  40% {
    clip: rect(26px, 9999px, 60px, 0);
  }
  45% {
    clip: rect(25px, 9999px, 66px, 0);
  }
  50% {
    clip: rect(57px, 9999px, 98px, 0);
  }
  55.0% {
    clip: rect(5px, 9999px, 46px, 0);
  }
  60.0% {
    clip: rect(82px, 9999px, 31px, 0);
  }
  65% {
    clip: rect(54px, 9999px, 27px, 0);
  }
  70% {
    clip: rect(28px, 9999px, 99px, 0);
  }
  75% {
    clip: rect(45px, 9999px, 69px, 0);
  }
  80% {
    clip: rect(23px, 9999px, 85px, 0);
  }
  85.0% {
    clip: rect(54px, 9999px, 84px, 0);
  }
  90% {
    clip: rect(45px, 9999px, 47px, 0);
  }
  95% {
    clip: rect(37px, 9999px, 20px, 0);
  }
  100% {
    clip: rect(4px, 9999px, 91px, 0);
  }
}

@keyframes glitch-animation-2 {
  0% {
    clip: rect(65px, 9999px, 100px, 0);
  }
  5% {
    clip: rect(52px, 9999px, 74px, 0);
  }
  10% {
    clip: rect(79px, 9999px, 85px, 0);
  }
  15.0% {
    clip: rect(75px, 9999px, 5px, 0);
  }
  20% {
    clip: rect(67px, 9999px, 61px, 0);
  }
  25% {
    clip: rect(14px, 9999px, 79px, 0);
  }
  30.0% {
    clip: rect(1px, 9999px, 66px, 0);
  }
  35% {
    clip: rect(86px, 9999px, 30px, 0);
  }
  40% {
    clip: rect(23px, 9999px, 98px, 0);
  }
  45% {
    clip: rect(85px, 9999px, 72px, 0);
  }
  50% {
    clip: rect(71px, 9999px, 75px, 0);
  }
  55.0% {
    clip: rect(2px, 9999px, 48px, 0);
  }
  60.0% {
    clip: rect(30px, 9999px, 16px, 0);
  }
  65% {
    clip: rect(59px, 9999px, 50px, 0);
  }
  70% {
    clip: rect(41px, 9999px, 62px, 0);
  }
  75% {
    clip: rect(2px, 9999px, 82px, 0);
  }
  80% {
    clip: rect(47px, 9999px, 73px, 0);
  }
  85.0% {
    clip: rect(3px, 9999px, 27px, 0);
  }
  90% {
    clip: rect(26px, 9999px, 55px, 0);
  }
  95% {
    clip: rect(42px, 9999px, 97px, 0);
  }
  100% {
    clip: rect(38px, 9999px, 49px, 0);
  }
}

<div class="glitch" data-text="WELCOME" align="center">WELCOME</div>

Answer 1

https://jsfiddle.net/j4fa7xnr/

检查一下。基本上，您的 div 宽度为 100%。当您随后定位伪元素之后和之前时，它们将对齐到 div 的左侧，而不是“欢迎”文本的左侧。

我所做的是，我在你的“故障”div 周围添加了一个容器，使容器 display:flex 并将 display:inline-block 添加到故障 div , 所以它只有文本的宽度。如果它具有文本的宽度，那么如果您定位 :after 和 :before 元素，它们将被正确定位，因为 .glitch div 不再具有 100% 的宽度。

编辑:这是另一个版本，没有 flex，而是 text-align:center;。 https://jsfiddle.net/j4fa7xnr/1/ 谢谢@Showdev