Question

我一直在看这个网站： http://foulomatic.hnldesign.nl/

我一直试图弄清楚如何生成文本动画，但看不到它。

我可以看到相关的CSS在这个文件中： http://foulomatic.hnldesign.nl/css/foulomatic.css

e.g。

.csstransitions #generated span.blur {
    position: relative;
    -webkit-animation: bounce 0.04s ease-out infinite;
    -moz-animation: bounce 0.04s ease-out infinite;
    -ms-animation: bounce 0.04s ease-out infinite;
    -o-animation: bounce 0.04s ease-out infinite;
    animation: bounce 0.04s ease-out infinite;
    color: transparent;
    text-shadow: 0 0 1px #000;
}

@-webkit-keyframes bounce {
    from    {   top: -5px;  opacity: 0.2; }
    50%     {   opacity: 0.5; }
    to      {   top: 5px;   opacity: 0.2; }
}

@-moz-keyframes bounce {
    from    {   top: -5px;  opacity: 0.2; }
    50%     {   opacity: 0.5; }
    to      {   top: 5px;   opacity: 0.2; }
}

@-ms-keyframes bounce {
    from    {   top: -5px;  opacity: 0.2; }
    50%     {   opacity: 0.5; }
    to      {   top: 5px;   opacity: 0.2; }
}

@-o-keyframes bounce {
    from    {   top: -5px;  opacity: 0.2; }
    50%     {   opacity: 0.5; }
    to      {   top: 5px;   opacity: 0.2; }
}

如果我右键单击生成的文本并检查Firefox中的元素，则显示为例如

<div class="well result" id="generated">
    <span> food trough</span>
    <span> extractor</span>
</div>

但是，如果我保存本地页面并运行它，包括jQuery和CSS文件，动画就不会触发。

有人可以帮忙解释一下这种效应是如何产生的吗？

希望我不会因为提问而受到抨击，因为撰写该页面的人已通过http://creativecommons.org/licenses/by-nc-nd/2.5/

许可了

Answer 1

它使用两个javascript文件将内容注入页面，A "database file"分类以保存数组中的所有单词，并使用generator file进行随机化/生成。这些似乎是与创建页面内容相关的主要文件，因此您可以尝试保存这些文件并将其插入到代码中;但是这还没有经过我的测试。

文本转换效果

1 个答案: