Доброго времени суток, уважаемые читатели! Меня зовут Александр Шевченко, я начинающий веб-разработчик. Перейдём к делу. Анимации в CSS3 — давно не новинка. Однако, иногда можно сделать что-то простое эффектным. Сегодня мы по этому принципу создадим небольшую анимацию загрузки.
Шаг 1. Плавное появление самого экрана загрузки
Да-да. Перед тем, как приступить к основной части, мы сделаем анимацию появления самого экрана загрузки.
body {
-webkit-animation: body-opacity-change 1s ease-in-out 0s 1 forwards;
-moz-animation: body-opacity-change 1s ease-in-out 0s 1 forwards;
animation: body-opacity-change 1s ease-in-out 0s 1 forwards;
opacity: 0;
background-color: transparent;
}
/* WebKit (Safari и Chrome) */
@-webkit-keyframes body-opacity-change {
from { opacity: 0; background-color: transparent; }
to { opacity: 1; background-color: #1b1c2c; }
}
/* Mozilla Firefox */
@-moz-keyframes body-opacity-change {
from { opacity: 0; background-color: transparent; }
to { opacity: 1; background-color: #1b1c2c; }
}
/* Общий синтаксис */
@keyframes body-opacity-change {
from { opacity: 0; background-color: transparent; }
to { opacity: 1; background-color: #1b1c2c; }
}
Шаг 2. Основная часть экрана загрузки
Теперь приступаем к самому экрану загрузки. Давайте сделаем основными компонентами анимации четыре отпрыгивающих шара.
div.circle {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background: #fff;
width: 13px;
height: 13px;
display: inline-block;
margin-top: 40%;
}Шаг 3. Применяем стили к шарам
Теперь начинается кульминация нашей небольшой работы. При помощи псевдоклассов :nth-child, :first-child и :last-child кастомизируем наши шары.
Внимание! При создании анимации к каждому шару применяйте разную длительность самой анимации дабы шары подпрыгивали в разное время с разной скоростью.
/* Первый шар */
div.circle:first-child {
-webkit-animation: upload 0.8s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
-moz-animation: upload 0.8s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
animation: upload 0.8s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
background-color: #4285f4;
margin-right: 6px;
}
/* Второй шар */
div.circle:nth-child(2) {
-webkit-animation: upload 1.3s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
-moz-animation: upload 1.3s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
animation: upload 1.3s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
background-color: #34a853;
margin-right: 3px;
}
/* Третий шар */
div.circle:nth-child(3) {
-webkit-animation: upload 1.1s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
-moz-animation: upload 1.1s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
animation: upload 1.1s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
background-color: #fbbc05;
margin-left: 3px;
}
/* Четвёртый шар */
div.circle:last-child {
-webkit-animation: upload 1.45s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
-moz-animation: upload 1.45s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
animation: upload 1.45s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
background-color: #ea4335;
margin-left: 6px;
}Шаг 4. Создаём ключевые кадры анимации
И таким образом, предпоследний шаг в нашем проекте — ключевые кадры анимации шаров.
/* WebKit (Safari и Chrome) */
@-webkit-keyframes upload {
from { -webkit-transform: translateY(35px); }
to { -webkit-transform: translateY(-35px); }
}
/* Mozilla Firefox */
@-moz-keyframes upload {
from { -moz-transform: translateY(35px); }
to { -moz-transform: translateY(-35px); }
}
/* Общий синтаксис */
@keyframes upload {
from { transform: translateY(35px); }
to { transform: translateY(-35px); }
}Шаг 5. Объединяем код
Последний штрих, конечно, самый банальный, однако всё же без него никак.
<!DOCTYPE html>
<html>
<head>
<meta charset="ansi" />
<title>Экран загрузки</title>
<style type="text/css">
/* Цвет фона */
body.bg-color {
background-color: transparent;
margin: 0;
}
/* Загрузка страницы */
body.onload {
-webkit-animation: body-opacity-change 1s ease-in-out 0s 1 forwards;
-moz-animation: body-opacity-change 1s ease-in-out 0s 1 forwards;
animation: body-opacity-change 1s ease-in-out 0s 1 forwards;
opacity: 0;
}
/* Шары */
div.circle {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background: #fff;
width: 13px;
height: 13px;
display: inline-block;
margin-top: 40%;
}
/* 1-ый шар */
div.circle:first-child {
-webkit-animation: upload 0.8s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
-moz-animation: upload 0.8s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
animation: upload 0.8s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
background-color: #4285f4;
margin-right: 6px;
}
/* 2-ой шар */
div.circle:nth-child(2) {
-webkit-animation: upload 1.3s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
-moz-animation: upload 1.3s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
animation: upload 1.3s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
background-color: #34a853;
margin-right: 3px;
}
/* 3-ий шар */
div.circle:nth-child(3) {
-webkit-animation: upload 1.1s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
-moz-animation: upload 1.1s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
animation: upload 1.1s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
background-color: #fbbc05;
margin-left: 3px;
}
/* 4-ый шар */
div.circle:last-child {
-webkit-animation: upload 1.45s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
-moz-animation: upload 1.45s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
animation: upload 1.45s cubic-bezier(0.39, 0.56, 0.57, 1) 0s infinite alternate-reverse;
background-color: #ea4335;
margin-left: 6px;
}
/*--- Кейфреймы анимаций ---*/
/*-- Загрузка страницы --*/
/* WebKit (Safari и Chrome) */
@-webkit-keyframes body-opacity-change {
from { opacity: 0; background-color: transparent; }
to { opacity: 1; background-color: #1b1c2c; }
}
/* Mozilla Firefox */
@-moz-keyframes body-opacity-change {
from { opacity: 0; background-color: transparent; }
to { opacity: 1; background-color: #1b1c2c; }
}
/* Общий синтаксис */
@keyframes body-opacity-change {
from { opacity: 0; background-color: transparent; }
to { opacity: 1; background-color: #1b1c2c; }
}
/*-- Анимация шаров --*/
/* WebKit (Safari и Chrome) */
@-webkit-keyframes upload {
from { -webkit-transform: translateY(35px); }
to { -webkit-transform: translateY(-35px); }
}
/* Mozilla Firefox */
@-moz-keyframes upload {
from { -moz-transform: translateY(35px); }
to { -moz-transform: translateY(-35px); }
}
/* Общий синтаксис */
@keyframes upload {
from { transform: translateY(35px); }
to { transform: translateY(-35px); }
}
</style>
</head>
<body class="bg-color onload">
<center>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</center>
</body>
</html>Демонстрация: код в песочнице SoloLearn
Надеюсь, что это поможет Вам при создании Вашего веб-сайта. Это был самый простой пример экрана загрузки и поэтому я советую Вам не ограничивать свою фантазию. На этом желаю Вам удачи в вёрстке и прощаюсь.
Автор: Александр Шевченко
