字母或jQuery中

Question

我開發我的客戶網站文字的填充效果，他問我有同樣的下方部位樣的效果，他的網站

http://www.big.dk/

在這裏你可以看到文本填充在完成填寫所有信件後，主頁將加載。任何想法如何複製同一種效果或任何可以共享的代碼。我嘗試翻譯代碼，但我認爲該網站正在使用swf文件而不是jquery，因爲我無法成功翻錄它。

Answer 1

爲了達到上述效果，我採用了以下方法。

1. 創建一個圖像及其上所需的文字（例如StackOverflow）。
2. 使該圖像上的文字透明。 （我在Microsoft Powerpoint中做過）。

這就是圖像看起來像

注意，文本區域是透明。下載此圖像並在任何圖像查看器中打開以進行驗證。

1. 然後，創建一個gradient。 （爲簡單起見，您可以使用this）

結合上述資源，這裏是fiddle。

#color { 
 
    position: absolute; 
 
    width: 800px; 
 
    height: 130px; 
 
    background: -moz-linear-gradient(0deg, #ff0000 0%, #2AA830 25%, #05C1FF 50%, #ffff00 75%, #0808BF 100%); 
 
    /* ff3.6+ */ 
 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #ff0000), color-stop(25%, #2AA830), color-stop(50%, #05C1FF), color-stop(75%, #ffff00), color-stop(100%, #0808BF)); 
 
    /* safari4+,chrome */ 
 
    background: -webkit-linear-gradient(0deg, #ff0000 0%, #2AA830 25%, #05C1FF 50%, #ffff00 75%, #0808BF 100%); 
 
    /* safari5.1+,chrome10+ */ 
 
    background: -o-linear-gradient(0deg, #ff0000 0%, #2AA830 25%, #05C1FF 50%, #ffff00 75%, #0808BF 100%); 
 
    /* opera 11.10+ */ 
 
    background: -ms-linear-gradient(0deg, #ff0000 0%, #2AA830 25%, #05C1FF 50%, #ffff00 75%, #0808BF 100%); 
 
    /* ie10+ */ 
 
    background: linear-gradient(90deg, #ff0000 0%, #2AA830 25%, #05C1FF 50%, #ffff00 75%, #0808BF 100%); 
 
    /* w3c */ 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#0808BF', GradientType=1); 
 
    /* ie6-9 */ 
 
} 
 
#text { 
 
    position: absolute; 
 
    width: 800px; 
 
    height: 130px; 
 
    background: url('http://i.stack.imgur.com/plKV4.png'); 
 
    background-size: 100% 100%; 
 
} 
 
#slider { 
 
    position: absolute; 
 
    left: 0%; 
 
    right: 0%; 
 
    top: 0%; 
 
    bottom: 0%; 
 
    background: gray; 
 
    animation: slide forwards 5s linear; 
 
} 
 
@keyframes slide { 
 
    0% { 
 
    left: 0%; 
 
    } 
 
    100% { 
 
    left: 100%; 
 
    } 
 
}

<div id="color"> 
 
    <div id="slider"></div> 
 
    <div id="text"></div> 
 
</div>

我已經使用keyframes animation填充顏色。
它可以通過jQuery