• milan_shubin
    19.09.2017 в 23:06

    Чтобы скачать надо приобрести V.I.P Группу!

  • Dimonnss666
    19.09.2017 в 22:12

    А где ссылка на скачивание?

  • milan_shubin
    11.09.2017 в 17:36

    кеукеукеукеукеукеукеукеукеку куеп
    упкуцепук

  • milan_shubin
    11.09.2017 в 17:30

    кекек

  • Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    Сегодняшние посетители:
    На сайте:
    ВИД ПРЕЛОАДЕРА ДЛЯ ЗАГРУЗКИ СТРАНИЦ НА CSS
    Описание:

    Интересный и красивый прелоадер загрузки в чистом CSS коде с использованием кейфреймов для анимации.  Вы полностью можете его изменить под себя,  к примеру цветовую гамму , размер , скорость и много другое.

    HTML
    
    Код
    <div class="c">   
        <div class="center">   
        <div class="r r1"></div>   
        <div class="r r2"></div>   
        <div class="r r3"></div>   
        <div class="r r4"></div>   
        <div class="r r5"></div>   
        </div>   
    </div>

    CSS
    
    Код
    <style type="text/css">   
        .c {   
        position: relative;   
        -webkit-transform: rotate(-90deg);   
        transform: rotate(-90deg);   
        }   
           
        .c .center {   
        width: 30px;   
        height: 30px;   
        background-color: #179cbb;   
        border-radius: 100%;   
        position: relative;   
        }   
           
        .c .center:after {   
        content: '';   
        position: absolute;   
        width: 100%;   
        height: 100%;   
        border-radius: 100%;   
        background-color: #179cbb;   
        -webkit-animation: center 2s infinite;   
        animation: center 2s infinite;   
        }   
           
        .c .r {   
        width: 10px;   
        height: 10px;   
        background-color: #179cbb;   
        position: absolute;   
        border-radius: 100%;   
        top: 10px;   
        left: 10px;   
        -webkit-animation: rotate 2s infinite;   
        animation: rotate 2s infinite;   
        }   
           
        .c .r1 {   
        -webkit-animation-timing-function: cubic-bezier(0.1, 0, 0, 0.9);   
        animation-timing-function: cubic-bezier(0.1, 0, 0, 0.9);   
        }   
           
        .c .r2 {   
        -webkit-animation-timing-function: cubic-bezier(0.1, 0.1, 0.8, 0.9);   
        animation-timing-function: cubic-bezier(0.1, 0.1, 0.8, 0.9);   
        }   
           
        .c .r3 {   
        -webkit-animation-timing-function: cubic-bezier(0.1, 0.2, 0.7, 0.9);   
        animation-timing-function: cubic-bezier(0.1, 0.2, 0.7, 0.9);   
        }   
           
        .c .r4 {   
        -webkit-animation-timing-function: cubic-bezier(0.1, 0.3, 0.6, 0.9);   
        animation-timing-function: cubic-bezier(0.1, 0.3, 0.6, 0.9);   
        }   
           
        .c .r5 {   
        -webkit-animation-timing-function: cubic-bezier(0.1, 0.4, 0.5, 0.9);   
        animation-timing-function: cubic-bezier(0.1, 0.4, 0.5, 0.9);   
        }   
           
        @-webkit-keyframes center {   
        to {   
        -webkit-transform: scale(3);   
        transform: scale(3);   
        opacity: 0;   
        }   
        }   
           
        @keyframes center {   
        to {   
        -webkit-transform: scale(3);   
        transform: scale(3);   
        opacity: 0;   
        }   
        }   
           
        @-webkit-keyframes rotate {   
        0% {   
        -webkit-transform: rotate(0deg) translateX(600%) rotate(0deg);   
        transform: rotate(0deg) translateX(600%) rotate(0deg);   
        }   
        2% {   
        -webkit-transform: rotate(0deg) translateX(600%) rotate(0deg);   
        transform: rotate(0deg) translateX(600%) rotate(0deg);   
        }   
        98% {   
        -webkit-transform: rotate(360deg) translateX(600%) rotate(-360deg);   
        transform: rotate(360deg) translateX(600%) rotate(-360deg);   
        }   
        100% {   
        -webkit-transform: rotate(360deg) translateX(600%) rotate(-360deg);   
        transform: rotate(360deg) translateX(600%) rotate(-360deg);   
        }   
        }   
           
        @keyframes rotate {   
        0% {   
        -webkit-transform: rotate(0deg) translateX(600%) rotate(0deg);   
        transform: rotate(0deg) translateX(600%) rotate(0deg);   
        }   
        2% {   
        -webkit-transform: rotate(0deg) translateX(600%) rotate(0deg);   
        transform: rotate(0deg) translateX(600%) rotate(0deg);   
        }   
        98% {   
        -webkit-transform: rotate(360deg) translateX(600%) rotate(-360deg);   
        transform: rotate(360deg) translateX(600%) rotate(-360deg);   
        }   
        100% {   
        -webkit-transform: rotate(360deg) translateX(600%) rotate(-360deg);   
        transform: rotate(360deg) translateX(600%) rotate(-360deg);   
        }   
        }   
    </style>

    Вот и всё!
    Автор материала:
    ...
    Логин на сайте: ...
    Группа: ...
    Статус: ...
    О материале:
    Дата добавления материала: 14.03.2017 в 21:57
    Материал просмотрен: 21 раз
    Категория материала: Скрипты
    К материалу оставлено: 0 комментариев

    Пожаловаться
    Сказать спасибо
    Источник
    Теги к материалу
    Поделись материалом с друзьями
    Рекомендуем к просмотру
    Всего комментариев: 0
    Обсуждение материала:
    Комментариев: 0
    avatar