<MyRusakov.ru />

Laravel от А до Я

Laravel от А до Я

Данный курс научит Вас создавать профессиональные сайты быстро и легко с помощью Laravel. Курс состоит из 7 разделов, в которых Вы с нуля освоите данный фреймворк до уровня, достаточном для создания любых сайтов.

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

К курсу прилагается и очень ценный Бонус: «Создание сайта на Laravel». В этом Бонусе Вы увидите практический пример создания полноценного сайта на Laravel.

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

Подпишитесь на мой канал на 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):

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