Question

如何在没有任何javascript或JQuery的情况下加载页面3秒后更改<li>元素的背景颜色？只有CSS？我看到人们只使用CSS做了很棒的事情，我认为这也很有可能。

此<li>正在执行水平菜单，我想在页面加载后的第一秒突出显示此选项。

如果解决方案是css3和HTML5，则没问题。

Answer 1

此示例将在加载时执行动画，该过程将将方块的背景颜色从红色变为黄色，过渡时间为5秒，并在加载后5秒开始 - 将仅执行一次并保持黄色背景：< / p>

<!DOCTYPE html>
<html>
    <head>
    <style type="text/css"> 
        .square {
            width:100px;
            height:100px;
            background:red;
            position:relative;
            -moz-animation-name:colorChange;
            -moz-animation-duration:5s;
            -moz-animation-delay:5s;
            -moz-animation-iteration-count:1;
            -moz-animation-fill-mode:forwards;
        }
        @-moz-keyframes colorChange {
            from {background:red;}
            to {background:yellow;}        
        }

    </style>
    </head>
    <body>
        <div class="square"></div>
    </body>
</html>

JSFiddle示例：http://jsfiddle.net/c8DDP/

从Firefox 4.0+开始 - 对于基于webkit的浏览器，可以使用-webkit前缀完成相同的操作。

Answer 2

覆盖范围一直到Netscape Navigator 2.0的解决方案：

使用动画gif作为背景图片。

演示http://jsfiddle.net/VPHEX/

3秒后更改<li>背景颜色，无需javascript </li>

2 个答案: