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線性漸變顯示錯誤的詞

回答

相關問題