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