• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов HTML » Анимация круговое движение с помощью CSS (Создание кругового движения элемента при помощи CSS)
Анимация круговое движение с помощью CSS
Kosten
Дата: Среда, 03.10.2018, 01:05 | Сообщение 1
Администраторы
Сообщений:18250
Награды: 55


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

Здесь можно изменить, где будет при первом запуске приложения приложение запуститься в течение нескольких секунд, в отличие от изображение, которое будет какое то время загружается, чтоб появится на экране.

Создание анимации в две разные фазы:

1. Круговой прогресс, который идет в круговом индикаторе прогресса и обновление зависит от хода загрузки.
2. Расширение кругового изображения, что открывает картинку через расширяющееся круговое окно.



Приступаем к установке:

HTML

Код
<div class="madever-inceasing"></div>


CSS

Код
.madever-inceasing,
.madever-inceasing::before,
.madever-inceasing::after {
    border-width: 0.4em;
    border-style: solid;
    border-radius: 50%;
    border-left-color: transparent;
    border-right-color: transparent;
    animation: animate 4s ease-in-out infinite alternate;
}

.madever-inceasing {
    width: 10em;
    height: 10em;
    font-size: 20px;
    border-top-color: red;
    border-bottom-color: blue;
    position: relative;
}

.madever-inceasing::before,
.madever-inceasing::after {
    content: '';
    position: absolute;
}

.madever-inceasing::before {
    width: 70%;
    height: 70%;
    border-top-color: orange;
    border-bottom-color: cyan;
    animation-duration: 8s;
}

.madever-inceasing::after {
    width: 40%;
    height: 40%;
    border-top-color: yellow;
    border-bottom-color: limegreen;
    animation-duration: 16s;
}

@keyframes animate {
    from {
  transform: rotate(0deg);
    }

    to {
  transform: rotate(1440deg);
    }
}

Демонстрация
Прикрепления: 4563362.png(17.4 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов HTML » Анимация круговое движение с помощью CSS (Создание кругового движения элемента при помощи CSS)
  • Страница 1 из 1
  • 1
Поиск: