Пример использования 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;
}
Анимация лоадера и текста
Каждый блок будет поворачиваться по кругу на 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
-
Создано 17.11.2021 10:28:06
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.