<MyRusakov.ru />

Создание сайтов на Django

Создание сайтов на Django

Данный курс научит Вас создавать сайты на очень мощном фреймворке – Django. Курс состоит из 9 разделов, в которых Вы с нуля освоите данный фреймворк на примере создания полноценного Интернет-магазина.

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

Помимо самого курса Вас ждёт ещё и бесплатный ценный Бонус: «Unit-тестирование сайта на Django». В этом Бонусе Вы узнаете, как можно написать автоматические тесты для проекта на Django. Это позволит находить оперативно ошибки, а также даст возможность в будущем добавлять новый функционал, не боясь что-то сломать в старом.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

Пример использования CSS переменных для анимации

Пример использования CSS переменных для анимации

Переменные в CSS появились в основном для создания анимаций. На этом уроке мы сделаем лоадер с летающим по заданной траектории самолетом. Это будет очень увлекательное занятие!

HTML разметка

Мы собираемся построить лоадер, состоящий из маленьких кругов образующих окружность. Одна окружность соответствует одному тегу span. Для объявления переменной нужно поставить два дефиса, произвольное имя переменной (i) и через двоеточие указать значение переменной. В нашем случае, значениями служат цифры от 1 до 20.

// Ссылка на библиотеку с иконками FontAwesome
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<section>
  <div class="loader">
    <span style="--i:1;"></span>
    <span style="--i:2;"></span>
    <span style="--i:3;"></span>
    <span style="--i:4;"></span>
    <span style="--i:5;"></span>
    <span style="--i:6;"></span>
    <span style="--i:7;"></span>
    <span style="--i:8;"></span>
    <span style="--i:9;"></span>
    <span style="--i:10;"></span>
    <span style="--i:11;"></span>
    <span style="--i:12;"></span>
    <span style="--i:13;"></span>
    <span style="--i:14;"></span>
    <span style="--i:15;"></span>
    <span style="--i:16;"></span>
    <span style="--i:17;"></span>
    <span style="--i:18;"></span>
    <span style="--i:19;"></span>
    <span style="--i:20;"></span>
    <div class="plane"></div>
  </div>
</section>

CSS код

Приступаем к стилизации: подготавливаем место для лоадера (фон, позиционирование, размеры).

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    justify-content: center; /*горизонтальное выравнивание*/
    align-items: center; /*вертикальное выравнивание*/
    flex-wrap: wrap;
    min-height: 100vh; /*на всю высоту экрана*/
    background: #03a9f4; /*цвет фона*/
}
.loader{
    position: relative; /*относительное позиционирование*/
    width: 120px; /*ширина лоадера*/
    height: 120px; /*высота лоадера*/
}

Рисуем одну окружность, как псевдоэлемент.

.loader span:before {
    content: "";
    position: absolute; /*абсолютное позиционирование*/
    top: 0;
    left: 0;
    width: 15px; /*ширина круга*/
    height: 15px; /*высота круга*/
    border-radius:50%;/*скругление углов*/
    background: #fff; /*цвет круга*/
    ...
}


Пример использования CSS переменных для анимации.

На самом деле нам надо 20 таких окружностей. Мы не зря в HTML разметке прописали 20 тегов span c числовыми значениями у переменных. Вместо переменной i, подставится результат следующей формулы и наши круги образуют окружность. Произойдет трансформация поворота на 18 градусов для каждого круга, таким образом круги равномерно распределятся по окружности.

.loader span {
    ...
// 18x1=18deg, 18x10=180deg .., 18x20=360deg
    transform: rotate(calc(18deg * var(--i)));
}


Пример использования CSS переменных для анимации.

Создание анимации

Анимация состоит из четырех кадров. В первом кадре (0%) круги невидимы, они масштабируются до 0. Во втором кадре (10%) увеличиваются в размерах, на 3-ем и 4-ом кадре снова исчезают. И все это происходит одновременно со всеми кругами.

@keyframes animate{
    0%
    {
        transform: scale(0);
    }
    10%
    {
        transform: scale(1.2);
    }
    80%,100%
    {
        transform: scale(0);
    }
}

А мы хотим, чтобы затухание и появление происходило по очереди. Для этого установим задержку анимацию, используя формулу в аргументах функции calc().

.loader span:before{
    transform: scale(0); /*элемент невидим*/
    animation: animate 2s linear infinite; /*название, время и длительность анимации*/
    animation-delay: calc(0.1s * var(--i)); /*задержка анимации*/
}

Мы добились эффекта, когда кружки двигаются по окружности, плавно исчезая и снова появляясь. Не хватает еще летящего самолета.



Пример использования CSS переменных для анимации.

Летящий по кругу самолет

Вставим в эту конструкцию иконку самолета, для усиления эффекта.

// самолет стоит на месте
.plane:before{
    content: '\f072'; /*код иконки plane с FontAwesome*/
    font-family: fontAwesome; /*название шрифта*/
    position: absolute;
    top: 80px; /*начальная позиция самолета сверху*/
    left: 85px; /*начальная позиция самолета слева*/
    color: #fff; /*цвет самолета*/
    font-size: 60px; /*размер самолета*/
    transform: rotate(180deg); /*разворот самолета*/
}

Теперь самолет летает по кругу.

.plane{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: rotating 2s linear infinite;
    animation-delay: -1s;
}
@keyframes rotating
    {
    0%
    {
        transform: rotate(10deg);
    }
    100%
    {
        transform: rotate(370deg);
    }
}


Пример использования CSS переменных для анимации.

Посмотрите пример на CodePen

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.