Создайте свой загрузчик CSS только с одним div

0 0

Существует множество техник создания точек загрузки. Я остановлюсь на своем любимом — radial-gradient и фоновой анимации.

Что ж, еще один скучный урок, в котором у нас будет куча кода, сложные @keyframes и безумные задержки анимации, верно? Вовсе нет. В этом уроке у вас будет:

Один div

Один @keyframes

Создайте свой загрузчик CSS только с одним div

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Без задержки и сложного расчета времени

Мы не будем делать одну анимацию, но многие из них будут использовать одну и ту же структуру кода

Не скучно, потому что эта статья закончится, прежде чем вы даже успеете моргнуть

1. Построение точки

Сначала мы создаем точку, используя следующий код:

CSS .dot { background:radial-gradient(farthest-side,currentColor 90%,red); background-size:30px 30px; background-position:top center; background-repeat:no-repeat; }

123456.dot {  background:radial-gradient(farthest-side,currentColor 90%,red);  background-size:30px 30px;  background-position:top center;  background-repeat:no-repeat;}

Создайте свой загрузчик CSS только с одним div

Логика проста: я создаю фоновый слой, имеющий размер равный 30×30, размещенный в top center и отключаю повторение, чтобы иметь только один экземпляр. Этот слой radial-gradient() имеет два цвета: цвет currentColor, который вы определяете в свойстве color (полезно для обновления расцветки точки), и цвет transparent (я использую красный, чтобы четко видеть предел градиентного слоя).

farthest-side позволяет мне определить самую дальнюю сторону для моей процентной ссылки, и поскольку мы имеем дело с квадратным градиентом (30×30), все стороны являются самыми дальними, поэтому, используя currentColor 100%, я рисую круг, который касается сторон. Я не использовал сложного значения, такого как 66% или 72.5%.
Но вы используете 90%, а не 100%!

Верно, и это связано с тем, что градиент не сглаживает, поэтому мы должны учитывать меньшее значение, чтобы иметь гладкий край. Ниже разница между 90% и 100%:

Создайте свой загрузчик CSS только с одним div

Это все! Теперь у нас есть точка, давайте ее анимируем.

2. Анимация точки

Чтобы анимировать точку, мы просто анимируем background-position. Давайте создадим, @keyframes который обновит позицию с top center на bottom center. Наш код станет таким:

CSS .dot { background:radial-gradient(farthest-side,currentColor 90%,#0000); background-size:30px 30px; background-position:top center; background-repeat:no-repeat; animation:m 1s infinite alternate; } @keyframes m{ to {background-position:bottom center} }

12345678910.dot {  background:radial-gradient(farthest-side,currentColor 90%,#0000);  background-size:30px 30px;  background-position:top center;  background-repeat:no-repeat;  animation:m 1s infinite alternate;}@keyframes m{  to {background-position:bottom center}}

Я думаю, что приведенное выше говорит само за себя. Мы также можем преобразовать код, как показано ниже. Это упростит выполнение следующих шагов.

CSS .dot { background:radial-gradient(farthest-side,currentColor 90%,#0000); background-size:30px 30px; background-repeat:no-repeat; animation:m 1s infinite alternate; } @keyframes m{ 0% {background-position:top center} 100% {background-position:bottom center} }

12345678910.dot {  background:radial-gradient(farthest-side,currentColor 90%,#0000);  background-size:30px 30px;  background-repeat:no-repeat;  animation:m 1s infinite alternate;}@keyframes m{  0%   {background-position:top    center}  100% {background-position:bottom center}}

Теперь вы можете анимировать одну точку. Все, что вам нужно сделать, это обновить позиции так, как вы хотите. Позже я буду рассматривать процентные значения вместо ключевых слов, таких как top center (что эквивалентно 50% 0).

3. Добавление дополнительных точек

Чтобы добавить больше точек, мы просто добавляем несколько блоков, расположенных рядом друг с другом. Тогда у каждого будет свой фоновый слой, своя анимация @keyframes и … Конечно, НЕТ!

Чтобы добавить больше точек, мы просто добавляем больше фоновых слоев. У нас может быть столько слоев, сколько мы хотим, поэтому один div может содержать много точек! Попробуем:

CSS .dot { background: radial-gradient(farthest-side,currentColor 90%,#0000), radial-gradient(farthest-side,currentColor 90%,#0000); background-size:30px 30px; background-repeat:no-repeat; animation:m 1s infinite alternate; } @keyframes m{ 0% {background-position:top left,bottom right} 100%{background-position:bottom left,top right} }

123456789101112.dot {  background:    radial-gradient(farthest-side,currentColor 90%,#0000),    radial-gradient(farthest-side,currentColor 90%,#0000);  background-size:30px 30px;  background-repeat:no-repeat;  animation:m 1s infinite alternate;}@keyframes m{  0%  {background-position:top    left,bottom right}  100%{background-position:bottom left,top    right}}

Одна точка будет анимирована от top left до bottom left, а другая от bottom right до top right. Так просто!
Обратите внимание, что я оставил только одно значение background-size, потому что все точки будут одинакового размера.

Оптимизируем код, используя переменную CSS и процентные значения:

CSS .dot { –d:radial-gradient(farthest-side,currentColor 90%,#0000); background:var(–d),var(–d); background-size:30px 30px; background-repeat:no-repeat; animation:m 1s infinite alternate; } @keyframes m{ 0% {background-position:0 0 ,100% 100%} 100%{background-position:0 100%,100% 0 } }

1234567891011.dot {  –d:radial-gradient(farthest-side,currentColor 90%,#0000);  background:var(–d),var(–d);  background-size:30px 30px;  background-repeat:no-repeat;  animation:m 1s infinite alternate;}@keyframes m{  0%  {background-position:0 0   ,100% 100%}  100%{background-position:0 100%,100% 0   }}

Переменная –d предотвратит повторение одного и того же синтаксиса градиента. Для процентных значений это скорее предпочтение, чем оптимизация. Мне легче иметь дело со значениями, чем с ключевыми словами.

Создайте свой загрузчик CSS только с одним div

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Вы уже моргнули? Нет проблем, потому что мы почти закончили. У нас есть все необходимое для создания любых точек загрузки.

4. Создание загрузчика

Чтобы создать загрузчик, вам сначала понадобятся ручка и бумага. Да я не шучу. Люди часто бросаются в свой любимый редактор кода и начинают писать код, пытаясь представить в голове, как все должно работать. Нет-нет, так не пойдет.

Вы помещаете все на бумагу, а затем переводите это в код.

Шаг 1: Определение структуры

На этом этапе мы определяем количество точек, их размер, промежутки и т.д. Итак, предположим, я буду использовать 4 точки размером 20×20 с зазором 5px. Это даст мне общую ширину 95px. Я не хочу, чтобы они подпрыгивали слишком высоко, поэтому давайте сделаем высоту 40px.

Создайте свой загрузчик CSS только с одним div

Шаг 2: Написание кода

Переводим то, что мы определили в (1), в код:

CSS .dot { width:95px; height:40px; –d:radial-gradient(farthest-side,currentColor 90%,#0000); background:var(–d),var(–d),var(–d),var(–d); background-size:20px 20px; background-repeat:no-repeat; }

12345678.dot {  width:95px;  height:40px;  –d:radial-gradient(farthest-side,currentColor 90%,#0000);  background:var(–d),var(–d),var(–d),var(–d);  background-size:20px 20px;  background-repeat:no-repeat;}

Пока, не беспокойтесь о результате. Вы увидите только одну точку, потому что все точки находятся друг над другом. Мы еще не определили background-position.

Шаг 3: Создание временной шкалы

На этом этапе вам нужно использовать свое воображение, чтобы определить каждый кадр вашей анимации. Нарисуйте пошаговую иллюстрацию задуманной вами анимации.

Вот пример, в котором моя анимация будет перемещать все точки снизу вверх одну за другой, а затем перемещать их обратно вниз.

Создайте свой загрузчик CSS только с одним div

У меня 9 кадров, и важно отметить, что последний такой же, как и первый, с непрерывной анимацией.

Шаг 4: Перевод временной шкалы в background-position

Теперь, когда у вас есть рисунок, просто определите background-position для каждого кадра. Для каждой точки у нас есть фиксированная координата X, будет изменятся только Y.

Для X мы имеем следующие значения: 0%, 33%, 66%, 100%. Это не очень интуитивно так что давайте использовать другой синтаксис: calc(0*100%/3), calc(1*100%/3), calc(2*100%/3), calc(3*100%/3). Логика проста: N точек, поэтому мы выполняем цикл от 0 до N-1и делим на N-1.Код нашей анимации будет:

CSS @keyframes m { ??%{background-position:calc(0*100%/3) 100%, calc(1*100%/3) 100%, calc(2*100%/3) 100%, calc(3*100%/3) 100%} ??%{background-position:calc(0*100%/3) 0 , calc(1*100%/3) 100%, calc(2*100%/3) 100%, calc(3*100%/3) 100%} ??%{background-position:calc(0*100%/3) 0 , calc(1*100%/3) 0 , calc(2*100%/3) 100%, calc(3*100%/3) 100%} ??%{background-position:calc(0*100%/3) 0 , calc(1*100%/3) 0 , calc(2*100%/3) 0 , calc(3*100%/3) 100%} ??%{background-position:calc(0*100%/3) 0 , calc(1*100%/3) 0 , calc(2*100%/3) 0 , calc(3*100%/3) 0 } ??%{background-position:calc(0*100%/3) 100%, calc(1*100%/3) 0 , calc(2*100%/3) 0 , calc(3*100%/3) 0 } ??%{background-position:calc(0*100%/3) 100%, calc(1*100%/3) 100%, calc(2*100%/3) 0 , calc(3*100%/3) 0 } ??%{background-position:calc(0*100%/3) 100%, calc(1*100%/3) 100%, calc(2*100%/3) 100%, calc(3*100%/3) 0 } ??%{background-position:calc(0*100%/3) 100%, calc(1*100%/3) 100%, calc(2*100%/3) 100%, calc(3*100%/3) 100%} }

1234567891011@keyframes m {  ??%{background-position:calc(0*100%/3) 100%, calc(1*100%/3) 100%, calc(2*100%/3) 100%, calc(3*100%/3) 100%}  ??%{background-position:calc(0*100%/3) 0   , calc(1*100%/3) 100%, calc(2*100%/3) 100%, calc(3*100%/3) 100%}  ??%{background-position:calc(0*100%/3) 0   , calc(1*100%/3) 0   , calc(2*100%/3) 100%, calc(3*100%/3) 100%}  ??%{background-position:calc(0*100%/3) 0   , calc(1*100%/3) 0   , calc(2*100%/3) 0   , calc(3*100%/3) 100%}  ??%{background-position:calc(0*100%/3) 0   , calc(1*100%/3) 0   , calc(2*100%/3) 0   , calc(3*100%/3) 0   }  ??%{background-position:calc(0*100%/3) 100%, calc(1*100%/3) 0   , calc(2*100%/3) 0   , calc(3*100%/3) 0   }  ??%{background-position:calc(0*100%/3) 100%, calc(1*100%/3) 100%, calc(2*100%/3) 0   , calc(3*100%/3) 0   }  ??%{background-position:calc(0*100%/3) 100%, calc(1*100%/3) 100%, calc(2*100%/3) 100%, calc(3*100%/3) 0   }  ??%{background-position:calc(0*100%/3) 100%, calc(1*100%/3) 100%, calc(2*100%/3) 100%, calc(3*100%/3) 100%}}

На первый взгляд это может показаться сложным, но это очень просто. Внутри каждого кадра я определяю положение каждой точки. X всегда один и тот же, и я обновляю Y от 0% (вверху) до 100% (внизу). У нас есть свои @keyframes!

Шаг 5: Нахождение процента кейфреймов

Последний шаг — заполнить ?? процентными значениями. У нас есть 9 кадров, поэтому мы рассматриваем 8 (всегда N-1) и делим 100% на 8 чтобы получить 12.5%. Мы начинаем с 0% и увеличиваем на 12.5% пока не достигнем 100%.

Вот и все! Теперь сложите все вместе и наслаждайтесь:

Единственное ограничение этой техники — ваше воображение.

Хотите еще примеров?

Хорошо, давайте сделаем еще два.

Создайте свой загрузчик CSS только с одним div

На этот раз я буду рассматривать 3 точки (всегда одного размера), и движение каждой из них: по центру -> сверху -> снизу -> по центру. Обратите внимание на стрелки на моем рисунке. Значит, мне нужна alternate анимация.

Создайте свой загрузчик CSS только с одним div

Загрузчик на 4 точки, где я также обновлю координату X.

Думаю, идея вам понятна. Теперь ваша очередь создать загрузчик CSS или, что еще лучше, полную коллекцию загрузчиков!

Автор: Temani Afif

Источник: webformyself.com

Оставьте ответ