Пример использования 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

Источник

Статьи по теме

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Back to top button