Сегодня у нас дело государственной важности, господа! Нам выпала честь создать анимацию — флаг на CSS. Да не всякий флаг требуется сотворить нашими руками, а именно триколор! Двухцветный флаг, кстати, мы также научимся делать по мотивам триколора. В основе создания анимации флага будет лежать принцип, описанный в предыдущей статье «Эффект волны на CSS». Итак, закатаем рукава повыше и приступим к созданию флага на CSS! Предлагаю начать с создания российского флага. Для получения иных триколоров по описанному ниже методу, потребуется лишь заменить цвета флага на нужные. В каких местах нужно будет внести изменения, я укажу в тексте статьи. Для начала сформулируем задачу:

Цель: создать анимацию развевающегося российского флага по примеру изображения в начале статьи.

Инструменты: HTML, CSS

Принцип создания анимации флага

Основной принцип заключается в задании вращения скругленным блокам, окрашенным в цвета флага. Так как блоки будут увеличены не менее, чем в 2 раза по отношению к фоновому кругу, а фоновому кругу мы зададим свойство overflow:hidden, то пользователь увидит лишь часть анимации. Увиденный фрагмент анимации будет создавать иллюзию развевающегося флага.

Приступаем к созданию кода

1. Для начала откроем HTML-файл и добавим в него фоновый блок с идентификатором «flag». Этот блок я планирую закрасить в белый цвет, чтобы из верхней части сформировать белую полосу флага. Внутри фонового блока расположим блоки с классами «wave2» и «wave3» для синей и красной полосы соответственно:

<div id="flag">
    <div class="wave2"></div>
    <div class="wave3"></div>
</div>

2. После этого добавим стили для вновь созданных блоков в CSS-файл. Для фонового блока определим белый background, зададим размеры, отступы, закругление. Кроме того, добавим свойство overflow: hidden, которое обрежет выходящие за пределы этого блока части других элементов:

#flag{
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 300px;
    border: 10px solid #e6e6e6;
    background: #fff;
    margin: 40px;
    overflow: hidden;
}

Позиционируем элементы с классами «wave2» и «wave3» так, чтобы селектор «.wave2» оказался расположен выше селектора «wave3». После этого увеличим размеры блоков до 200%, закруглим края и окрасим их в синий и красный цвета. В заключение присвоим этим блокам анимацию под названием «wave», которую опишем ниже:

.wave2{
    left: -50%;
    top: 30%;
    background-color: blue;
}
.wave3{
    left: -50%;
    top: 66%;
    background-color: red; 
}
.wave2, .wave3{
    position: absolute;
    width: 200%;
    height: 200%;	
    border-radius: 45%;
    animation: wave 10s linear infinite;
}

Настало время оживить наши блоки! Для этого опишем анимацию «wave» — зададим блокам вращение на 360 градусов:

@keyframes wave {
    100% {
         transform: rotate(360deg);
    }
}

Осталось сохранить изменения в файлах и обновить страницу в браузере. Анимация российского флага выполнена успешно!

Используя приведенный выше код можно создать другой триколор. Для этого селекторам «#flag», «.wave2» и «.wave3» нужно задать другие значения для свойства background. Например, для создания габонского триколора определим следующие значения background-color:

#flag {
    ...
    background-color:#4e9f61;
    ...
}
.wave2{
    ...
    background-color: #fcd132;
    ...
}
.wave3{
    ...
    background-color: #3a75c3;
    ...
}

В итоге у меня получится габонский флаг: