Сайт вебмайстра

Ефект чарівний погляд виглядає все реалістично, а головне, красиво. У цьому скрипті використовуються картинки, тому виглядає все реально. Це приклад того, як можна реалізовувати свої ідеї засобами CSS3. Подивіться ДЕМО приклад і Ви переконаєтесь у красі даного скрипта. Скрипт можна використовувати як тло сайту або у вигляді шапки. Час руху налаштовується у стилях CSS. Взагалі, де Ви будете використовувати скрипт вирішувати Вам. Отже приступимо до встановлення: Це в CSS (ПУ» Управління дизайном» Таблиця стилів):

200?'200px':''+(this.scrollHeight+5)+'px');" html,body .sky < height:100%; background: no- repeat #007fd5; position:relative; overflow:hidden;>-o-animation:sky_background 50s ease-out infinite; -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0);

.moon < background: no-repeat url("http://megascripts.ru/demo/oblaka_na_css/moon.png"); position:absolute; Left:0; height:100%; width:300%; -webkit-animation:moon 50s linear infinite; -moz-animation:moon 50s linear infinite; -o-animation:moon 50s linear infinite; -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); >

.clouds_one < background: no-repeat url("http://megascripts.ru/demo/oblaka_na_css/cloud_one.png"); position:absolute; Left:0; top:0; height:100%; width:300%; -webkit-animation:cloud_one 50s linear infinite; -moz-animation:cloud_one 50s linear infinite; -o-animation:cloud_one 50s linear infinite; -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); >

.clouds_two < фон: URL-адреса без повторення ("http://megascripts.ru/demo/oblaka_na_css/cloud_two.png"); позиція: абсолютна; ліворуч:0; верх:0; висота: 100%; ширина: 300%; -webkit-animation:cloud_two 75s linear infinite; -moz-animation:cloud_two 75s linear infinite; -o-animation:cloud_two 75s linear infinite; -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); >

.clouds_three < фон: url без повторення ("http://megascripts.ru/demo/oblaka_na_css/cloud_three.png"); позиція: абсолютна; ліворуч:0; верх:0; висота: 100%; ширина: 300%; -webkit-animation:cloud_three 100s linear infinite; -moz-animation:cloud_three 100s linear infinite; -o-animation:cloud_three 100s linear infinite; -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0) ; >

@-webkit-keyframes sky_background < 0% < фон: без повторення #007fd5; колір:#007fd5 ; >

50% < фон: без повторення #000; колір:#a3d9ff ; >

100% < фон: без повторення #007fd5; колір:#007fd5 ; > >

@-webkit-keyframes місяць < 0% < непрозорість: 0; лівий:-200% ; -moz-перетворення: масштаб (0,5); -webkit-transform: масштаб (0,5); >

50% < непрозорість: 1; -moz-transform: scale(1); left:0% ; bottom:250px; -webkit-transform: scale(1);>

100% < непрозорість: 0; bottom:500px; -moz-перетворення: масштаб (0,5); -webkit-transform: scale(0,5);> >

@-webkit-keyframes cloud_one < 0% < лівий:0 ; >

@-webkit-keyframes cloud_two < 0% < лівий:0 ; >

@-webkit-keyframes cloud_three < 0% < лівий:0 ; >

@-moz-keyframes sky_background < 0% < фон: без повторення #007fd5; колір:#007fd5 ; >

50% < фон: без повторення #000; колір:#a3d9ff ; >

100% < фон: без повторення #007fd5; колір:#007fd5 ; > >

@-moz-keyframes місяць < 0% < непрозорість: 0; лівий:-200% ; -moz-перетворення: масштаб (0,5); -webkit-transform: масштаб (0,5); >

50% < непрозорість: 1; -moz-transform: scale(1); left:0% ; bottom:250px; -webkit-transform: scale(1); >

100% < непрозорість: 0; bottom:500px; -moz-перетворення: масштаб (0,5); -webkit-transform: масштаб (0,5); > >

@-moz-keyframes cloud_one < 0% < лівий:0 ; >

@-moz-keyframes cloud_two < 0% < лівий:0 ; >

HTML-код вставте тут куда Вам потрібно:

---