html - CSS线性渐变显示错误的词

Question

我的网站是http://tracebaxter.com我有一个线性渐变模仿标题作为文本阴影。每次我第一次加载页面时，所有渐变都使用最后一个标题，我必须重新加载页面才能正确。这是什么原因造成的。 我的 CSS

h2,h2:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  }
.content {
  margin-left: 20%;
}
.header {
  text-decoration: none;
  color: black;
}

h2 {
  display: inline-block;
  color: #4d4235;
  font-family: 'Righteous', serif;
  font-size: 6em;
  text-shadow: .03em .03em 0 gray;
  width: 100%;
  }
  h2:after {
    content: attr(data-shadow);
    position: absolute;
    z-index: -1;
    top: .06em; left: .06em;
    text-shadow: none;
    background-image:
      -webkit-linear-gradient(left top, transparent 0%, transparent 25%, #555 25%, #555 50%, transparent 50%, transparent 75%, #555 75%);
    background-size: .05em .05em;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: shad-anim 12s linear infinite;
    }
@keyframes shad-anim {
  0% {background-position: 0 0}
  0% {background-position: 100% -100%}
  }

<h2 id="about" class="dashed-shadow" data-shadow="About">About</h2>

Answer 1

您确定这不是特定于浏览器的问题吗？此代码似乎像向我宣传的那样工作，生成动画文本阴影。

请注意，“webkit-”属性是非标准的。您可以使用符合标准的等效项:

color 而不是 webkit-fill-color

添加与webkit-background-clip相同的background-clip

另请注意，background-clip: text 和 webkit-fill-color 当前不支持两个 Microsoft 浏览器的最新版本:IE 或 Edge。您可能需要提供后备。它看起来仍然不错，因为第二个文本生成为阴影，如果有点暗。