CSS3 или HTML5 - как сделать фоновую анимацию, например облака, плавающие на страницах HTML5?

0

Мне просто интересно, есть ли способ сделать фоновые анимации в чистом CSS3-дизайне, может быть, с небольшим количеством HTML5 или jquery?

я вижу, что некоторые люди делают это

http://addtwitter-followers.com/

есть ли простой способ сделать это в CSS3?

1 ответ

1
Лучший ответ

Fiddle DEMO

CSS

@keyframes animatedBackground {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 100% 0;
    }
}
@-webkit-keyframes animatedBackground {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 100% 0;
    }
}
@-ms-keyframes animatedBackground {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 100% 0;
    }
}
@-moz-keyframes animatedBackground {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 100% 0;
    }
}
#wrap {
    height:100%;
    width:100%;
    background: url(http://addtwitter-followers.com/wp-content/themes/twentyten/images/bck.jpg) top no-repeat #94E3F4;
    background-position: 0px 0px;
    background-repeat: repeat-x;
    animation: animatedBackground 150s linear infinite;
    -ms-animation: animatedBackground 150s linear infinite;
    -moz-animation: animatedBackground 150s linear infinite;
    -webkit-animation: animatedBackground 150s linear infinite;
}

HTML

<div id="wrap">...</div>


Рекомендации

@keyframes

анимация:

анимации

Ещё вопросы

Сообщество Overcoder
Наверх
Меню