Анимация средствами HTML5 и CSS3

 

 

 

В анимации не использованы изображения.
JavaScript только для кнопки повтора и  закладок кода.
Для браузеров: Chrome 15+, Safari 5, Firefox 8+

 

 

 

Чтобы изменить цвет объекта следует открыть код страницы в редакторе (Блокноте, MS FrontPage или другом) и, для соответствующего браузерного движка (webkit, moz, ms) найти (Ctrl+F) и заменить значения параметра тега background: стоящего после имени объекта.

Например (для движка webkit)белое рассветное и черное дневное небо:

@-webkit-keyframes sky {

0% {
background-color: #ffffff;
}

33% {
background-color: #000000;
}

66% {
background-color: #6293e5;
}

100% {
background-color: #525252;
}


Проверить результать изменения следует в браузере (обновляя страницу).

  • Основные объекты (если кто не понял):

  • солнце - sunrise (восходящее - 0%, в зените - 33%, заходящее - 66%)

  • небо - sky (утреннее - 0%, дневное - 33%, вечернее - 66%, ночное - 100%)

  • земля - ground (.....)

луна - moon (.....)

  • облако - cloud (.....)

О браузерах, их движках и кодах web-цветов см. здесь. В коде анимации соответствие:

  • webkit - для браузеров Apple Safari и Google Chrome

  • moz - для браузера Firefox

  • ms - для браузера Microsoft Internet Explorer

  • а с браузером Opera лучше вообще не работать :-(

kmp