Сайт на уебмастера

Ефектът е очарователен поглед, всичко изглежда реалистично и най-важното красиво. Този скрипт използва снимки, така че всичко изглежда реално. Това е пример за това как можете да реализирате вашите идеи с CSS3. Вижте ДЕМО примера и ще се убедите в красотата на този скрипт. Скриптът може да се използва като фон на сайта или като хедър. Времето за движение се конфигурира в CSS стилове. Като цяло къде ще използвате скрипта зависи от вас. И така, нека започнем с инсталацията: Това е в CSS ( UI "Design Management" Stylesheet):

200?'200px':''+(this.scrollHeight+5)+'px');"> html,body .sky < height:100%; background: no-repeat #007fd5; position:relative; overflow:hidden; -webkit-animation:sky_background 50s ease-out infinite ; - moz-animation:sky_background 50s ease-out infinite; -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 < фон: url без повторение ("http://megascripts.ru/demo/oblaka_na_css/moon.png"); позиция: абсолютна; ляво:0; височина: 100%; ширина: 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 < фон: url без повторение ("http://megascripts.ru/demo/oblaka_na_css/cloud_one.png"); позиция: абсолютна; ляво:0; горе:0; височина: 100%; ширина: 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 линеен безкраен; -o-animation:cloud_two 75s линеен безкраен; -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 линейно безкрайно; -o-animation:cloud_three 100s линейно безкрайно; -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 moon < 0% < непрозрачност: 0; ляво: -200% ; -moz-трансформация: мащаб (0,5); -webkit-transform: мащаб (0,5); >

50% < непрозрачност: 1; -moz-трансформация: мащаб(1); ляво:0% ; отдолу:250px; -webkit-transform: scale(1);>

100% < непрозрачност: 0; отдолу:500px; -moz-трансформация: мащаб(0,5); -webkit-transform: мащаб(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-ключови кадри луна < 0% < непрозрачност: 0; ляво: -200% ; -moz-трансформация: мащаб (0,5); -webkit-transform: мащаб (0,5); >

50% < непрозрачност: 1; -moz-трансформация: мащаб(1); ляво:0% ; отдолу:250px; -webkit-transform: мащаб(1); >

100% < непрозрачност: 0; отдолу:500px; -moz-трансформация: мащаб(0,5); -webkit-transform: мащаб (0,5); > >

@-moz-keyframes cloud_one < 0% < ляво:0 ; >

@-moz-ключови кадри cloud_two < 0% < ляво:0 ; >

HTML код въведете тук куда трябва:

---