0

我试图创建一个闪烁的背景和文本效果，其中每个 li 都被分配了一个背景和文本的类颜色。第一个对话框 id 链接可见并且 li 被隐藏，直到链接被点击。我已经将 jquery 循环插件下载到我的服务器上并设置了我的 html/css，但我在隐藏 li 和启动循环时遇到了麻烦。

当前的 CSS：

ul li { list-style: none; }

.black { background-color: #000; }
.yellow { background-color: #FFFF00; }
.white { background-color: #FFF; }
.green { background-color: #7CFC00; }
.blue { background-color: #00FFFF; }
.pink { background-color: #FF00CC; }
.orange { background-color: #FF8C00; }

#visible-words {
    text-align: center; font-size: 100px;
}

目前的html：

<body>
    <div id="overlay">
        <div id="dialog">
            <h1><a href="">Contains flashing images</a>.</h1>
        </div>
    </div>

    <div id="words-wrap">
        <span></span>
    </div>
    <ul id="visible-words">
        <li class="black"><span class="yellow">Flash</span></li>
        <li class="yellow"><span class="black">Flash</span></li>
        <li class="black"><span class="yellow">Flash</span></li>
        <li class="yellow"><span class="black">Flash</span></li>

        <li class="black"><span class="white">Text</span></li>
        <li class="white"><span class="black">Text</span></li>
        <li class="black"><span class="white">Text</span></li>
        <li class="white"><span class="black">Text</span></li>

        <li class="black"><span class="green">Flash</span></li>
        <li class="green"><span class="black">Flash</span></li>
        <li class="black"><span class="green">Flash</span></li>
        <li class="green"><span class="black">Flash</span></li>

        <li class="black"><span class="white">Text</span></li>
        <li class="white"><span class="black">Text</span></li>
        <li class="black"><span class="white">Text</span></li>
        <li class="white"><span class="black">Text</span></li>

        <li class="black"><span class="blue">Flash</span></li>
        <li class="blue"><span class="black">Flash</span></li>
        <li class="black"><span class="blue">Flash</span></li>
        <li class="blue"><span class="black">Flash</span></li>

        <li class="black"><span class="white">Text</span></li>
        <li class="white"><span class="black">Text</span></li>
        <li class="black"><span class="white">Text</span></li>
        <li class="white"><span class="black">Text</span></li>

        <li class="black"><span class="pink">Flash</span></li>
        <li class="pink"><span class="black">Flash</span></li>
        <li class="black"><span class="pink">Flash</span></li>
        <li class="pink"><span class="black">Flash</span></li>
</ul>

我已经搜索了类似的主题，但似乎没有一个能够达到我正在寻找的使用带有背景颜色的列表项的效果。任何帮助，将不胜感激。

4

0 回答 0