Добавить в корзинуПозвонить
Найти в Дзене
Дмитрий Ефремов

Привет, Другалек. Сегодня покажу как создать интересную анимацию загрузки:)

Сегодня покажу и расскажу, как сделать интересную анимацию загрузки на сайте:)
1. Создаем стандартный html документ и подключаем css к странице:) 2. Создаем в <body> div-контейнер, и добавляем в него 4 <span> 3. Переходим в CSS, где и происходит вся магия:)
Обнуляем Padding и Margin(для удобства) 3.1 Добавляем нашему классу позиционирование и равняем все по центру (мне просто удобнее так для примера). 3.2 Добавляем свойства всем <span> классу 'load'. 3.3 Добавляем keyframes для анимации 3.4 Добавляем превдоклассы affter и before для load span. Далее прописываем свойства для него. 3.5 Добавляем псевдокласс nth-child для каждого элемента )))))))))))))))))))))))))))

Сегодня покажу и расскажу, как сделать интересную анимацию загрузки на сайте:)

1. Создаем стандартный html документ и подключаем css к странице:)

Стандартный html документ с подключенный css.
Стандартный html документ с подключенный css.

2. Создаем в <body> div-контейнер, и добавляем в него 4 <span>

Div-контейнер с элементами span. К div добавляем класс "load"
Div-контейнер с элементами span. К div добавляем класс "load"

3. Переходим в CSS, где и происходит вся магия:)

Обнуляем Padding и Margin(для удобства)

Обнуляем в Body
Обнуляем в Body

3.1 Добавляем нашему классу позиционирование и равняем все по центру (мне просто удобнее так для примера).

Добавили позиционирование и выравнили. Последнюю сточку кода этого класса добавим чуть позже:)
Добавили позиционирование и выравнили. Последнюю сточку кода этого класса добавим чуть позже:)

3.2 Добавляем свойства всем <span> классу 'load'.

Свойства класса 'load'
Свойства класса 'load'

3.3 Добавляем keyframes для анимации

-7

3.4 Добавляем превдоклассы affter и before для load span.

Далее прописываем свойства для него.

-8
-9

3.5 Добавляем псевдокласс nth-child для каждого элемента

У меня их 4.
У меня их 4.

)))))))))))))))))))))))))))