изменить <li>цвет фона через 3 секунды без JavaScript - PullRequest
Новая
       5

изменить <li>цвет фона через 3 секунды без JavaScript

0 голосов
/ 10 января 2012

Как изменить цвет фона элемента <li> через 3 секунды, когда страница загружается без JavaScript или JQuery?Только с CSS?Я видел людей, которые делают удивительные вещи только с помощью CSS, и я думаю, что это также очень возможно.

Этот <li> выполняет горизонтальное меню, и я хотел бы выделить эту опцию в течение 3 первых секунд послестраница загружена.

Нет проблем, если решение - css3 и HTML5.

Ответы [ 2 ]

4 голосов
/ 10 января 2012

Этот пример будет выполнять анимацию при загрузке, которая изменит цвет фона квадрата с красного на желтый с переходом через 5 секунд и запустится через 5 секунд после загрузки - выполнится только один раз и останется на желтом фоне: 1001 * 

<!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.

2 голосов
/ 10 января 2012

Решение с охватом вплоть до Netscape Navigator 2.0:

Использование анимированного GIF в качестве фонового изображения .

Демо http://jsfiddle.net/VPHEX/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...