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

添加与background-clip

相同的webkit-background-clip

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

CSS线性渐变显示错误的单词

1 个答案: