<MyRusakov.ru />

Написание лайфхаков на Python

Написание лайфхаков на Python

Данный курс научит Вас автоматизировать самые разные задачи на языке Python, благодаря чему Вы сэкономите на рутине тысячи и тысячи часов своей жизни. Курс состоит из 20 примеров в различных областях: файлы и директории, медиа-файлы, Интернет, Web-мастеринг, Unreal Engine. Каждый пример упрощает ту или иную задачу в своей области, при этом каждый из них создаётся прямо на Ваших глазах и тщательно комментируется.

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

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

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

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

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

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

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

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

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

Пример использования CSS функций var() и calc()

Пример использования CSS функций var() и calc()

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

Создание лоадера

Наш круговой лоадер состоит из 20 блоков. Каждому блоку присвоена переменная i с её уникальным значением.

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

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: consolas;
}
section{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #001d10;
}
.loading{
    position: relative;/*относительное позиционирование лоадера*/
    width: 250px;/*ширина лоадера*/
    height: 250px;/*высота лоадера*/
}
.loading .blocks{
    position: absolute;/*абсолютное позиционирование блока*/
    width: 8px;/*ширина блока*/
    height: 25px;/*высота блока*/
    background: #050c09;/*цвет блока*/
    left: 50%;/*позиция слева*/
    border-radius: 8px;/*закругление углов*/
    transform: rotate(calc(18deg * var(--i)));
    transform-origin: 0 125px;/*исходное направление трансформации*/
    animation: animate 1.9s ease-in-out infinite;
    animation-delay: calc(0.05s * var(--i));
}
h3{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 2em;
    letter-spacing: 2px;/*межбуквенное пространство*/
    animation: animateText 2s ease-in-out infinite;
    animation-delay: -1s;
}


Пример использования CSS функций var() и calc().

Анимация лоадера и текста

Каждый блок будет поворачиваться по кругу на 18 градусов, из расчета 320deg/20block = 18deg each. Вместо переменной i, подставится её значение.

//формула расчета
transform: rotate(calc(18deg * var(--i)));

Установим для каждого блока задержку начала трансформации - на каждый блок по 0.05 секунд (1/20).

animation-delay: calc(0.05s * var(--i));

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

@keyframes animate{
  0%,50%
  {
    background: #050c09;
    box-shadow: none;
  }
  50.1%,100%
  {
    background: #0f0;
    box-shadow: 0 0 5px #0f0,
      0 0 15px #0f0,
      0 0 30px #0f0,
       0 0 60px #0f0,
      0 0 90px #0f0;
  }
}
@keyframes animateText{
  0%,50%
  {
    color: #050c09;
    text-shadow: none;
  }
  50.1%,100%
  {
    color: #0f0;
    text-shadow: 0 0 5px #0f0,
      0 0 15px #0f0;
  }
}

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

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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