jQuery中的字母或文本填充效果

Question

我正在为我的客户开发一个网站，他要求我在以下网站上使用相同的网站，这对他的网站有影响

http://www.big.dk/

在这里，您可以看到文本正在填满，并且在填满所有字母后，将加载主页。 我不知道该如何复制同一种效果或您可以共享的任何代码。 我尝试撕开代码，但我认为该站点使用的是swf文件而不是jquery因为我无法成功撕开它。

Answer 1

为了达到上述效果，我遵循以下方法。

1. 创建带有所需文本的图像（例如StackOverflow ）。
2. 使此图像上的文本透明。 （我在Microsoft Powerpoint做到了）。

这是图像的外观

请注意，文本区域是透明的 。 下载此图像并在任何图像查看器中打开以进行验证。

3. 然后，创建一个渐变 。 （为简单起见，您可以使用它 ）

结合以上资源，这就是小提琴 。

 #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代替