• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать прелоадер для сайта на чистом CSS (Загрузчик для сайтов на CSS виде красивой блесны)
Создать прелоадер для сайта на чистом CSS
Kosten
Дата: Среда, 2020-06-03, 23:03 | Сообщение 1
Онлайн
Администраторы
Сообщений:28577
Награды: 62


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

Обратите внимание, что здесь загрузочные элементы анимированы с помощью CSS3, поэтому они должны хорошо работать в современных браузерах, которые поддерживают свойства CSS3, такие как переходы, а также @keyframes с анимацией.



HTML

Код
<div class="kainvolutes">
    <span class="ladekun-vazveka"></span>
    <span class="ladekun-vazveka"></span>  
    <span class="ladekun-vazveka"></span>     
    <span class="ladekun-vazveka"></span>             
</div>  

CSS

Код
.ladekun-vazveka {
    display: inline-block;
    width: 20px;
    height: 60px;
    margin: 0 2px;
    box-shadow: 0 0 10px #000;
    animation: loading-icon 10s ease-in-out infinite;
    animation-delay: 5s;
}

@keyframes loading-icon {
    0% {
        transform: scale(1) rotate(0deg);
    }
    10% {
        transform: scale(1) rotate(360deg);
    }
    20% {
        transform: scale(1) rotate(180deg);
    }
    30% {
        transform: scale(2, 1.5) skewY(40deg) rotate(180deg);
    }
    40% {
        transform: scale(1) rotate(360deg);
        border-radius: 0;
    }
    50% {
        transform: scale(2, 2) skewY(40deg) rotate(0deg);
        border-radius: 0 50%;
    }
    60% {
        transform: scale(2, 2.5) skewY(40deg) rotate(360deg);
    }
    70% {
        transform: scale(2, 1.5) skewY(40deg) rotate(0deg);
    }
    80% {
        transform: scale(1) rotate(0deg);
        border-radius: 0;
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

.ladekun-vazveka:nth-child(1) {
    background-color: #27AAE1;
    animation-delay: 0s;
}

.ladekun-vazveka:nth-child(2) {
    background-color: #F05A2A;
    animation-delay: 0.1s;
}

.ladekun-vazveka:nth-child(3) {
    background-color: #FFCC00;
    animation-delay: 0.2s;
}

.ladekun-vazveka:nth-child(4) {
    background-color: #27AE60;
    animation-delay: 0.3s;
}

.kainvolutes {
    background-color: #000000;
    z-index: 20;
    -webkit-animation-delay: 15s;
    animation-delay: 15s;
}

@keyframes kainvolutes {
    0% {
        transform: scale(1) rotate(0deg);
    }
    100% {
        transform: scale(1) rotate(360deg);
    }
}

Рекомендую посмотреть демонстрацию.

Демонстрация
Прикрепления: 8173266.png(21.0 Kb) · loader-spinner-.zip(3.3 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать прелоадер для сайта на чистом CSS (Загрузчик для сайтов на CSS виде красивой блесны)
  • Страница 1 из 1
  • 1
Поиск: