файлы
| Главная » Файлы » Все для ucoz » Скрипты для ucoz |
Реалистичные облака на CSS3
| 04.03.2014, 12:22 | |
| Эффект чарующий взгляд, выглядит все реалистично, а главное, красиво. В этом скрипте используются картинки, поэтому и выглядит все реально. Это пример того, как можно реализовывать свои идеи средствами CSS3. Посмотрите ДЕМО пример и Вы убедитесь в красоте данного скрипта. Скрипт можно использовать как фон сайта либо в виде шапки. Время движения настраивается в стилях CSS. Вообщем где Вы будете использовать скрипт решать Вам. Итак приступим к установке: Это в CSS ( ПУ» Управление дизайном» Таблица стилей ): Код html,body {margin:0; height:100%;} .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 { 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 { background: no-repeat url("http://megascripts.ru/demo/oblaka_na_css/cloud_two.png"); position:absolute; left:0; top:0; height:100%; width: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 { background: no-repeat url("http://megascripts.ru/demo/oblaka_na_css/cloud_three.png"); position:absolute; left:0; top:0; height:100%; width: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% { background: no-repeat #007fd5; color:#007fd5 ; } 50% { background: no-repeat #000; color:#a3d9ff ; } 100% { background: no-repeat #007fd5; color:#007fd5 ; } } @-webkit-keyframes moon { 0% { opacity: 0; left:-200% ; -moz-transform: scale(0.5); -webkit-transform: scale(0.5); } 50% { opacity: 1; -moz-transform: scale(1); left:0% ; bottom:250px; -webkit-transform: scale(1);} 100% { opacity: 0; bottom:500px; -moz-transform: scale(0.5); -webkit-transform: scale(0.5);} } @-webkit-keyframes cloud_one { 0% { left:0 ; } 100% { left:-200% ; } } @-webkit-keyframes cloud_two { 0% { left:0 ; } 100% { left:-200% ; } } @-webkit-keyframes cloud_three { 0% { left:0 ; } 100% { left:-200% ; } } @-moz-keyframes sky_background { 0% { background: no-repeat #007fd5; color:#007fd5 ; } 50% { background: no-repeat #000; color:#a3d9ff ; } 100% { background: no-repeat #007fd5; color:#007fd5 ; } } @-moz-keyframes moon { 0% { opacity: 0; left:-200% ; -moz-transform: scale(0.5); -webkit-transform: scale(0.5); } 50% { opacity: 1; -moz-transform: scale(1); left:0% ; bottom:250px; -webkit-transform: scale(1); } 100% { opacity: 0; bottom:500px; -moz-transform: scale(0.5); -webkit-transform: scale(0.5); } } @-moz-keyframes cloud_one { 0% { left:0 ; } 100% { left:-200% ; } } @-moz-keyframes cloud_two { 0% { left:0 ; } 100% { left:-200% ; } } @-moz-keyframes cloud_three {0% {left:0; } 100% { left:-200%;} } HTML код вставьте туда куда Вам нужно: Код <div class="sky"> <div class="moon"></div> <div class="clouds_one"></div> <div class="clouds_two"></div> <div class="clouds_three"></div> </div> | |
| Просмотров: 361 | Загрузок: 0 | | |
| Всего комментариев: 0 | |