CSS线性渐变显示错误的词

我的网站是http://tracebaxter.com，我有一个线性渐变模仿标题充当文字阴影。每次我第一次加载页面时，所有的渐变都使用最后一个标题，我必须重新加载页面才能正确。这是什么造成的。我的CSSCSS线性渐变显示错误的词

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>

来源

2017-07-27 Trace Baxter

你是什么意思，他们使用的是最后一个标题？包括第一次加载时，所有渐变都与文本相匹配。 – Britni

你确定这是不是一个特定的浏览器的问题？此代码似乎按照我所宣传的那样工作，生成动画文本阴影。

请注意，'webkit-'属性是非标准的。您可以使用符合标准的等价物：

color而不是webkit-fill-color

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

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

来源

2017-07-27 07:21:14 aphid

感谢您的回应，它一直在窃听我。我会拉起网站，并在我所有的标题后面显示正在进行的渐变，直到我重新加载页面，但是在我发布该页面后不久，它就停止了！这些提示非常棒，但我会实施它们。 –

CSS线性渐变显示错误的词

回答

相关问题