Анимация CSS3. Создание баннеров
Авторы учебного курса:
Арефьева Анастасия Александровна,
студентка гр. ЗКТ-402С РГППУ, выпуск 2019 г.
Власова Наталья Сергеевна,
доцент кафедры информационных систем и технологий РГППУ
Урок 2. Вращающийся прыгающий шар
Цель: cоздать при помощи правила @keyframes и свойств анимации прыгающий шар.
Задача: изучить правило для создания ключевых кадров @keyframes.
CSS анимация это не только перемещение элемента из одной точки в другую, а это еще искажение и другие трансформации элементов. И в даном уроке мы расмотрим с вами основные свойства. В результате работы, у вас должен получится прыгающий шар, который вы можете видеть на рисунке 1.
Рисунок 1
Задание №1.Создание файла
1. Создайте html файл.
2. В данном файле создайте 2 блока div.
В первом блоке div будет сам контейнер, внутри которого будет прыгать наш шар. Во втором блоке будет размещаться сам шар. Каждому присвойте классы.
Для первого блока пусть класс будет - vnutri а для второго - shar. Код на рисунке ниже.
Рисунок 2
Задание №2. Создание стилей
1. Создайте основные стили для наших блоков - vnutri и shar.
Ширину и высоту блока vnutri укажите 700 и 300 пикселей. При желании можете задать фон, в нашем случае мы этого делать не будем.
Так же укажите жирную рамку в размере двух пикселей, это будет наш «пол».
Укажите позиционирование - relative. Код на рисунке ниже.
Рисунок 3
2. Для нашего второго блока, где будет наш шар, задайте следующие стили:
- ширина и длина будет 50 пикселей;
- шар будет залит градиентом от темно-синего до черного;
- укажите border-radius, что бы был не квадрат, а круг;
- позиционирование элемента будет - absolute.
Рисунок 4
Таким образом мы создали статичный шар. Результат можете увидеть на рисунке 5.
Рисунок 5
Задание №3. Добавление свойств анимации
Перед добавлением ключевых кадров укажем в нашем стиле shar некоторые свойства для анимации.
Ниже вы можете увидеть какие свойства отвечают за анимацию.
– animation-name — уникальное имя анимации (ключевых кадров, их мы укажем позднее);
– animation-duration — длительность анимации в секундах;
animation-timing-function — кривая изменения скорости анимации. Может принимать следующие значения: linear | ease | ease-in | ease-out | cubic-bezier(n,n,n,n). В Нашем случае мы будем использовать значение - linear;
– animation-delay — задержка в секундах перед началом анимации;
– animation-iteration-count — количество повторов анимации. Задается либо просто числом, либо можно указать infinite и анимация будет выполняться бесконечно.
Примечание: Так же все эти значения можно указывать через пробел и используя лишь одно свойство - animation. В нашем уроке мы поступим именно так. Главное помнить, что указывать нужно все по порядку.
1. В нашем стиле shar добавьте свойство animation. В нем укажите название - в нашем случае это будет share.
Далее укажите продолжительность анимации 3 секунды (столько будет длиться движение шара вверх-вниз).
Кривая изменения скорости будет - linear (анимация происходит равномерно на протяжении всего времени, без колебаний в скорости.), вы можете поэксперементировать и выбрать вариант, котрый будет выглядеть более естественно.
Так же наша анимация будет идти бесконечно.
Описание данного стиля вы можете увидеть в листинге ниже.
Рисунок 6
2. Добавление анимации.
Добавим сразу свойства анимации для движения шара влево-вправо.
Укажите через запятую в том же стиле название shareleft, длительностью 24 секунду, с кривой изменения скорости linear, что бы повторялось бесконечно, а так же укажите направление анимации alternate (рисунок 7).
Рисунок 7
Задание №4. Добавление ключевых кадров
Кадры определяют на каком шаге, какие свойства будут анимированы. Анимация создается путем постепенного перехода от одного набора стилей CSS к другому. Изменение стиля будет происходить в процентах, или с ключевыми словами «from» и «to»: 0% это начало анимации, 100%, когда анимация завершена.
Синтаксис - @keyframes название_анимации {селектор-ключевого-кадра {css-стили;} }
Название анимации обязательно. В нашем уроке мы задавали название выше. Селекторы так же явлются обязательными, указывается в процентах от продолжительности анимации. Стили так же являются обязательными элементами, иначе незачем применять правило.
1. Добавим ключевые кадры для анимациии - share.
Для первого и последнего кадра (0% и 100%) пропишем свойство bottom:100%. Это означает что начинаться наша анимация будет сверху и заканчиваться там же.
Теперь добавим дополнительные кадры для плавного движения шара. У нас это будут кадры 25%, 30% и 35%, данные кадры мы создаем для того что бы было ощущение реального шара, то что он ударяется о поверхность. На 20 и 35 укажем значение bottom:10px. А на 30% укажем bottom:0, а так же уменьшим высоту в два раза и изменим цвет. В данном кадре наш шар будет ударяться о рамку снизу и сплющиваться, а потом к 35% обратно растягиваться.
Добавим в стили дополнительных кадров вращение на 360%. Листинг кода данного задания вы можете увидеть ниже.
Рисунок 8
Теперь наш шар прыгает вверх-вниз (рисунок 9). Осталось добавить движение влево-вправо.
Рисунок 9
2. Добавим ключевый кадры, чтобы наш шар так же двигался влево-вправо. Это просто. Достаточно в начальном ключевом кадре поставить значение left:0% и в конечном кадре поставить left:0% (рисунок 10).
Рисунок 10
Всё, наш прыгаюший шар готов. Проверьте результат, он должен совпадать с тем, что показан в начале урока. Сохраните результат работы под своим именем.
Контрольное задание
В нижеприведенных примерах изучите коды. Создайте свой пример, отличающийся от данных, с другой траекторией движения шариков.
Пример 1
html-код
<div class="var1_kontr"> <div class="shar1_var1"></div> <div class="shar2_var1"></div> <div class="shar3_var1"></div> <div class="shar4_var1"></div> <div class="shar5_var1"></div> <div class="shar6_var1"></div> <div class="shar7_var1"></div> </div>
css-код
.var1_kontr {
width: 250px;
height: 200px;
border-bottom: solid 2px;
position: relative;
}
.shar1_var1 {
position: absolute;
width: 25px;
height: 25px;
background: radial-gradient(circle at 25px 25px, #5cabff, #000);
border-radius: 100%;
animation: share1_var1 3s linear infinite;
}
@keyframes share1_var1 {
0%{bottom: 0%; left: 0%;}
50%{transform: rotate(360deg); bottom: 100%; left:90%; width: 25px; height: 25px;}
100%{transform: rotate(360deg); bottom: 0%; left: 0%; width: 25px; height: 25px;}
}
.shar2_var1 {
position: absolute;
width: 25px;
height: 25px;
background: radial-gradient(circle at 25px 25px, yellow, #000);
border-radius: 100%;
animation: share2_var1 3s linear infinite;
}
@keyframes share2_var1 {
0%{bottom: 0%; left: 15%;}
50%{transform: rotate(360deg); bottom: 100%; left:75%; width: 25px; height: 25px;}
100%{transform: rotate(360deg); bottom: 0%; left:15%; width: 25px; height: 25px;}
}
.shar3_var1 {
position: absolute;
width: 25px;
height: 25px;
background: radial-gradient(circle at 25px 25px, green, #000);
border-radius: 100%;
animation: share3_var1 3s linear infinite;
}
@keyframes share3_var1 {
0%{bottom: 0%; left: 30%;}
50%{transform: rotate(360deg); bottom: 100%; left:60%; width: 25px; height: 25px;}
100%{transform: rotate(360deg); bottom: 0%; left:30%; width: 25px; height: 25px;}
}
.shar4_var1 {
position: absolute;
width: 25px;
height: 25px;
background: radial-gradient(circle at 25px 25px, red, #000);
border-radius: 100%;
animation: share4_var1 3s linear infinite;
}
@keyframes share4_var1 {
0%{bottom: 0%; left: 45%;}
50%{transform: rotate(360deg); bottom: 100%; left:45%; width: 25px; height: 25px;}
100%{transform: rotate(360deg); bottom: 0%; left:45%; width: 25px; height: 25px;}
}
.shar5_var1 {
position: absolute;
width: 25px;
height: 25px;
background: radial-gradient(circle at 25px 25px, purple, #000);
border-radius: 100%;
animation: share5_var1 3s linear infinite;
}
@keyframes share5_var1 {
0%{bottom: 0%; left: 60%;}
50%{transform: rotate(360deg); bottom: 100%; left:30%; width: 25px; height: 25px;}
100%{transform: rotate(360deg); bottom: 0%; left:60%; width: 25px; height: 25px;}
}
.shar6_var1 {
position: absolute;
width: 25px;
height: 25px;
background: radial-gradient(circle at 25px 25px, blue, #000);
border-radius: 100%;
animation: share6_var1 3s linear infinite;
}
@keyframes share6_var1 {
0%{bottom: 0%; left: 75%;}
50%{transform: rotate(360deg); bottom: 100%; left:15%; width: 25px; height: 25px;}
100%{transform: rotate(360deg); bottom: 0%; left:75%; width: 25px; height: 25px;}
}
.shar7_var1 {
position: absolute;
width: 25px;
height: 25px;
background: radial-gradient(circle at 25px 25px, #fff, #000);
border-radius: 100%;
animation: share7_var1 3s linear infinite;
}
@keyframes share7_var1 {
0%{bottom: 0%; left: 90%;}
50%{transform: rotate(360deg); bottom: 100%; left:0%; width: 25px; height: 25px;}
100%{transform: rotate(360deg); bottom: 0%; left:90%; width: 25px; height: 25px;}
}
Пример 2
html-код
<div class="var2_kontr"> <div class="shar1_var2"></div> <div class="shar2_var2"></div> <div class="shar3_var2"></div> <div class="shar4_var2"></div> <div class="shar5_var2"></div> <div class="shar6_var2"></div> <div class="shar7_var2"></div> <div class="shar8_var2"></div> </div>
css-код
.var2_kontr {
width: 250px;
height: 220px;
position: relative;
}
.shar1_var2 {
position: absolute;
width: 25px;
height: 25px;
background: radial-gradient(circle at 25px 25px, #fff, #000);
border-radius: 100%;
animation: share1_var2 3s linear infinite;
}
@keyframes share1_var2 {
0%{bottom: 0%; left: 0%;}
50%{transform: rotate(360deg); bottom: 100%; left:90%; width: 25px; height: 25px;}
100%{transform: rotate(360deg); bottom: 0%; left: 0%; width: 25px; height: 25px;}
}
.shar2_var2 {
position: absolute;
width: 25px;
height: 25px;
background: radial-gradient(circle at 25px 25px, yellow, #000);
border-radius: 100%;
animation: share2_var2 3s linear infinite;
}
@keyframes share2_var2 {
0%{bottom: 50%; left: 0%;}
50%{transform: rotate(360deg); bottom: 50%; left:90%; width: 25px; height: 25px;}
100%{transform: rotate(360deg); bottom: 50%; left:0%; width: 25px; height: 25px;}
}
.shar3_var2 {
position: absolute;
width: 25px;
height: 25px;
background: radial-gradient(circle at 25px 25px, green, #000);
border-radius: 100%;
animation: share3_var2 3s linear infinite;
}
@keyframes share3_var2 {
0%{bottom: 50%; left: 90%;}
50%{transform: rotate(360deg); bottom: 50%; left:0%; width: 25px; height: 25px;}
100%{transform: rotate(360deg); bottom: 50%; left:90%; width: 25px; height: 25px;}
}
.shar4_var2 {
position: absolute;
width: 25px;
height: 25px;
background: radial-gradient(circle at 25px 25px, red, #000);
border-radius: 100%;
animation: share4_var2 3s linear infinite;
}
@keyframes share4_var2 {
0%{bottom: 0%; left: 45%;}
50%{transform: rotate(360deg); bottom: 100%; left:45%; width: 25px; height: 25px;}
100%{transform: rotate(360deg); bottom: 0%; left:45%; width: 25px; height: 25px;}
}
.shar5_var2 {
position: absolute;
width: 25px;
height: 25px;
background: radial-gradient(circle at 25px 25px, purple, #000);
border-radius: 100%;
animation: share5_var2 3s linear infinite;
}
@keyframes share5_var2 {
0%{bottom: 100%; left: 45%;}
50%{transform: rotate(360deg); bottom: 0%; left:45%; width: 25px; height: 25px;}
100%{transform: rotate(360deg); bottom: 100%; left:45%; width: 25px; height: 25px;}
}
.shar6_var2 {
position: absolute;
width: 25px;
height: 25px;
background: radial-gradient(circle at 25px 25px, blue, #000);
border-radius: 100%;
animation: share6_var2 3s linear infinite;
}
@keyframes share6_var2 {
0%{bottom: 100%; left: 90%;}
50%{transform: rotate(360deg); bottom: 0%; left:0%; width: 25px; height: 25px;}
100%{transform: rotate(360deg); bottom: 100%; left:90%; width: 25px; height: 25px;}
}
.shar7_var2 {
position: absolute;
width: 25px;
height: 25px;
background: radial-gradient(circle at 25px 25px, #5cabff, #000);
border-radius: 100%;
animation: share7_var2 3s linear infinite;
}
@keyframes share7_var2 {
0%{bottom: 0%; left: 90%;}
50%{transform: rotate(360deg); bottom: 100%; left:0%; width: 25px; height: 25px;}
100%{transform: rotate(360deg); bottom: 0%; left:90%; width: 25px; height: 25px;}
}
.shar8_var2 {
position: absolute;
width: 25px;
height: 25px;
background: radial-gradient(circle at 25px 25px, pink, #000);
border-radius: 100%;
animation: share8_var2 3s linear infinite;
}
@keyframes share8_var2 {
0%{bottom: 100%; left: 0%;}
50%{transform: rotate(360deg); bottom: 0%; left:90%; width: 25px; height: 25px;}
100%{transform: rotate(360deg); bottom: 100%; left:0%; width: 25px; height: 25px;}
}
Пример 3
html-код
<div class="var3_kontr"> <div class="shar1_var3"></div> <div class="shar2_var3"></div> <div class="shar3_var3"></div> <div class="shar4_var3"></div> <div class="shar5_var3"></div> <div class="shar6_var3"></div> <div class="shar7_var3"></div> <div class="shar8_var3"></div> </div>
css-код
.var3_kontr {
width: 250px;
height: 200px;
border-bottom: solid 2px;
position: relative;
}
.shar1_var3 {
position: absolute;
width: 25px;
height: 25px;
background: radial-gradient(circle at 25px 25px, #fff, #000);
border-radius: 100%;
animation: share1_var3 3s linear infinite;
}
@keyframes share1_var3 {
0%{bottom: 0%; left: 0%;}
50%{transform: rotate(360deg); bottom: 50%; left:35%; width: 25px; height: 25px;}
100%{transform: rotate(360deg); bottom: 0%; left: 0%; width: 25px; height: 25px;}
}
.shar4_var3 {
position: absolute;
width: 25px;
height: 25px;
background: radial-gradient(circle at 25px 25px, red, #000);
border-radius: 100%;
animation: share4_var3 3s linear infinite;
}
@keyframes share4_var3 {
0%{bottom: 0%; left: 45%;}
50%{transform: rotate(360deg); bottom: 50%; left:45%; width: 25px; height: 25px;}
100%{transform: rotate(360deg); bottom: 0%; left:45%; width: 25px; height: 25px;}
}
.shar7_var3 {
position: absolute;
width: 25px;
height: 25px;
background: radial-gradient(circle at 25px 25px, #5cabff, #000);
border-radius: 100%;
animation: share7_var3 3s linear infinite;
}
@keyframes share7_var3 {
0%{bottom: 0%; left: 90%;}
50%{transform: rotate(360deg); bottom: 50%; left:55%; width: 25px; height: 25px;}
100%{transform: rotate(360deg); bottom: 0%; left:90%; width: 25px; height: 25px;}
}
.shar2_var3 {
position: absolute;
width: 25px;
height: 25px;
background: radial-gradient(circle at 25px 25px, yellow, #000);
border-radius: 100%;
animation: share2_var3 3s linear infinite;
}
@keyframes share2_var3 {
0%{bottom: 50%; left: 0%;}
50%{transform: rotate(360deg); bottom: 50%; left:35%; width: 25px; height: 25px;}
100%{transform: rotate(360deg); bottom: 50%; left:0%; width: 25px; height: 25px;}
}
.shar3_var3 {
position: absolute;
width: 25px;
height: 25px;
background: radial-gradient(circle at 25px 25px, green, #000);
border-radius: 100%;
animation: share3_var3 3s linear infinite;
}
@keyframes share3_var3 {
0%{bottom: 50%; left: 90%;}
50%{transform: rotate(360deg); bottom: 50%; left:55%; width: 25px; height: 25px;}
100%{transform: rotate(360deg); bottom: 50%; left:90%; width: 25px; height: 25px;}
}
.shar5_var3 {
position: absolute;
width: 25px;
height: 25px;
background: radial-gradient(circle at 25px 25px, purple, #000);
border-radius: 100%;
animation: share5_var3 3s linear infinite;
}
@keyframes share5_var3 {
0%{bottom: 100%; left: 45%;}
50%{transform: rotate(360deg); bottom: 50%; left:45%; width: 25px; height: 25px;}
100%{transform: rotate(360deg); bottom: 100%; left:45%; width: 25px; height: 25px;}
}
.shar6_var3 {
position: absolute;
width: 25px;
height: 25px;
background: radial-gradient(circle at 25px 25px, blue, #000);
border-radius: 100%;
animation: share6_var3 3s linear infinite;
}
@keyframes share6_var3 {
0%{bottom: 100%; left: 90%;}
50%{transform: rotate(360deg); bottom: 50%; left:55%; width: 25px; height: 25px;}
100%{transform: rotate(360deg); bottom: 100%; left:90%; width: 25px; height: 25px;}
}
.shar8_var3 {
position: absolute;
width: 25px;
height: 25px;
background: radial-gradient(circle at 25px 25px, pink, #000);
border-radius: 100%;
animation: share8_var3 3s linear infinite;
}
@keyframes share8_var3 {
0%{bottom: 100%; left: 0%;}
50%{transform: rotate(360deg); bottom: 50%; left:35%; width: 25px; height: 25px;}
100%{transform: rotate(360deg); bottom: 100%; left:0%; width: 25px; height: 25px;}
}
Пример 4
html-код
<div class="var4_kontr"> <div class="var4_kontr"> <div class="shar1_var4"></div> <div class="shar2_var4"></div> <div class="shar3_var4"></div> <div class="shar4_var4"></div> <div class="shar5_var4"></div> <div class="shar6_var4"></div> <div class="shar7_var4"></div> <div class="shar8_var4"></div> </div>
css-код
.var4_kontr {
width: 250px;
height: 200px;
border: solid 1px;
position: relative;
}
.shar1_var4 {
position: absolute;
width: 25px;
height: 25px;
background: radial-gradient(circle at 25px 25px, #fff, #000);
border-radius: 100%;
animation: share1_var4 4s linear infinite;
}
@keyframes share1_var4 {
0%{bottom: 0%; left: 0%;}
25%{transform: rotate(360deg); bottom: 88%; left:0%; width: 25px; height: 25px;}
50%{transform: rotate(360deg); bottom: 88%; left:90%; width: 25px; height: 25px;}
75%{transform: rotate(360deg); bottom: 0%; left:90%; width: 25px; height: 25px;}
100%{transform: rotate(360deg); bottom: 0%; left: 0%; width: 25px; height: 25px;}
}
.shar2_var4 {
position: absolute;
width: 25px;
height: 25px;
background: radial-gradient(circle at 25px 25px, yellow, #000);
border-radius: 100%;
animation: share2_var4 4s linear infinite;
}
@keyframes share2_var4 {
0%{bottom: 50%; left: 0%;}
12%{transform: rotate(360deg); bottom: 88%; left:0%; width: 25px; height: 25px;}
37%{transform: rotate(360deg); bottom: 88%; left:90%; width: 25px; height: 25px;}
63%{transform: rotate(360deg); bottom: 0%; left:90%; width: 25px; height: 25px;}
88%{transform: rotate(360deg); bottom: 0%; left:0%; width: 25px; height: 25px;}
100%{transform: rotate(360deg); bottom: 50%; left: 0%; width: 25px; height: 25px;}
}
.shar3_var4 {
position: absolute;
width: 25px;
height: 25px;
background: radial-gradient(circle at 25px 25px, green, #000);
border-radius: 100%;
animation: share3_var4 4s linear infinite;
}
@keyframes share3_var4 {
0%{bottom: 88%; left: 0%;}
25%{transform: rotate(360deg); bottom: 88%; left:90%; width: 25px; height: 25px;}
50%{transform: rotate(360deg); bottom: 0%; left:90%; width: 25px; height: 25px;}
75%{transform: rotate(360deg); bottom: 0%; left:0%; width: 25px; height: 25px;}
100%{transform: rotate(360deg); bottom: 88%; left: 0%; width: 25px; height: 25px;}
}
.shar4_var4 {
position: absolute;
width: 25px;
height: 25px;
background: radial-gradient(circle at 25px 25px, red, #000);
border-radius: 100%;
animation: share4_var4 4s linear infinite;
}
@keyframes share4_var4 {
0%{bottom: 88%; left: 45%;}
12%{transform: rotate(360deg); bottom: 88%; left:90%; width: 25px; height: 25px;}
37%{transform: rotate(360deg); bottom: 0%; left:90%; width: 25px; height: 25px;}
63%{transform: rotate(360deg); bottom: 0%; left:0%; width: 25px; height: 25px;}
88%{transform: rotate(360deg); bottom: 88%; left:0%; width: 25px; height: 25px;}
100%{transform: rotate(360deg); bottom: 88%; left:45%; width: 25px; height: 25px;}
}
.shar5_var4 {
position: absolute;
width: 25px;
height: 25px;
background: radial-gradient(circle at 25px 25px, purple, #000);
border-radius: 100%;
animation: share5_var4 4s linear infinite;
}
@keyframes share5_var4 {
0%{bottom: 88%; left: 90%;}
25%{transform: rotate(360deg); bottom: 0%; left:90%; width: 25px; height: 25px;}
50%{transform: rotate(360deg); bottom: 0%; left:0%; width: 25px; height: 25px;}
75%{transform: rotate(360deg); bottom: 88%; left:0%; width: 25px; height: 25px;}
100%{transform: rotate(360deg); bottom: 88%; left: 90%; width: 25px; height: 25px;}
}
.shar6_var4 {
position: absolute;
width: 25px;
height: 25px;
background: radial-gradient(circle at 25px 25px, blue, #000);
border-radius: 100%;
animation: share6_var4 4s linear infinite;
}
@keyframes share6_var4 {
0%{bottom: 50%; left: 90%;}
12%{transform: rotate(360deg); bottom: 0%; left:90%; width: 25px; height: 25px;}
37%{transform: rotate(360deg); bottom: 0%; left:0%; width: 25px; height: 25px;}
63%{transform: rotate(360deg); bottom: 90%; left:0%; width: 25px; height: 25px;}
88%{transform: rotate(360deg); bottom: 88%; left:90%; width: 25px; height: 25px;}
100%{transform: rotate(360deg); bottom: 50%; left:90%; width: 25px; height: 25px;}
}
.shar7_var4 {
position: absolute;
width: 25px;
height: 25px;
background: radial-gradient(circle at 25px 25px, #5cabff, #000);
border-radius: 100%;
animation: share7_var4 4s linear infinite;
}
@keyframes share7_var4 {
0%{bottom: 0%; left: 90%;}
25%{transform: rotate(360deg); bottom: 0%; left:0%; width: 25px; height: 25px;}
50%{transform: rotate(360deg); bottom: 88%; left:0%; width: 25px; height: 25px;}
75%{transform: rotate(360deg); bottom: 88%; left:90%; width: 25px; height: 25px;}
100%{transform: rotate(360deg); bottom: 0%; left: 90%; width: 25px; height: 25px;}
}
.shar8_var4 {
position: absolute;
width: 25px;
height: 25px;
background: radial-gradient(circle at 25px 25px, pink, #000);
border-radius: 100%;
animation: share8_var4 4s linear infinite;
}
@keyframes share8_var4 {
0%{bottom: 0%; left: 45%;}
12%{transform: rotate(360deg); bottom: 0%; left:0%; width: 25px; height: 25px;}
37%{transform: rotate(360deg); bottom: 88%; left:0%; width: 25px; height: 25px;}
63%{transform: rotate(360deg); bottom: 88%; left:90%; width: 25px; height: 25px;}
88%{transform: rotate(360deg); bottom: 0%; left:90%; width: 25px; height: 25px;}
100%{transform: rotate(360deg); bottom: 0%; left:45%; width: 25px; height: 25px;}
}
Пример 5
html-код
<div class="var5_kontr"> <div class="shar1_var5"></div> <div class="shar2_var5"></div> <div class="shar3_var5"></div> <div class="shar4_var5"></div> <div class="shar5_var5"></div> <div class="shar6_var5"></div> <div class="shar7_var5"></div> <div class="shar8_var5"></div> </div>
css-код
.var5_kontr {
width: 250px;
height: 220px;
position: relative;
}
.shar1_var5 {
position: absolute;
width: 25px;
height: 25px;
background: radial-gradient(circle at 25px 25px, #fff, #000);
border-radius: 100%;
animation: share1_var5 3s linear infinite;
}
@keyframes share1_var5 {
0%{bottom: 12%; left: 12%;}
50%, 80%{transform: rotate(360deg); bottom: 50%; left:50%;}
100%{transform: rotate(360deg); bottom: 12%; left: 12%;}
}
.shar4_var5 {
position: absolute;
width: 25px;
height: 25px;
background: radial-gradient(circle at 25px 25px, red, #000);
border-radius: 100%;
animation: share4_var5 3s linear infinite;
}
@keyframes share4_var5 {
0%{bottom: 0%; left: 45%;}
50%, 80%{transform: rotate(360deg); bottom: 50%; left:50%;}
100%{transform: rotate(360deg); bottom: 0%; left:45%;}
}
.shar7_var5 {
position: absolute;
width: 25px;
height: 25px;
background: radial-gradient(circle at 25px 25px, #5cabff, #000);
border-radius: 100%;
animation: share7_var5 3s linear infinite;
}
@keyframes share7_var5 {
0%{bottom: 12%; left: 82%;}
50%, 80%{transform: rotate(360deg); bottom: 50%; left:50%;}
100%{transform: rotate(360deg); bottom: 12%; left:82%;}
}
.shar2_var5 {
position: absolute;
width: 25px;
height: 25px;
background: radial-gradient(circle at 25px 25px, yellow, #000);
border-radius: 100%;
animation: share2_var5 3s linear infinite;
}
@keyframes share2_var5 {
0%{bottom: 50%; left: 0%;}
50%, 80%{transform: rotate(360deg); bottom: 50%; left:50%;}
100%{transform: rotate(360deg); bottom: 50%; left:0%;}
}
.shar3_var5 {
position: absolute;
width: 25px;
height: 25px;
background: radial-gradient(circle at 25px 25px, green, #000);
border-radius: 100%;
animation: share3_var5 3s linear infinite;
}
@keyframes share3_var5 {
0%{bottom: 50%; left: 90%;}
50%, 80%{transform: rotate(360deg); bottom: 50%; left:50%;}
100%{transform: rotate(360deg); bottom: 50%; left:90%;}
}
.shar5_var5 {
position: absolute;
width: 25px;
height: 25px;
background: radial-gradient(circle at 25px 25px, purple, #000);
border-radius: 100%;
animation: share5_var5 3s linear infinite;
}
@keyframes share5_var5 {
0%{bottom: 100%; left: 45%;}
50%, 80%{transform: rotate(360deg); bottom: 50%; left:50%;}
100%{transform: rotate(360deg); bottom: 100%; left:45%;}
}
.shar6_var5 {
position: absolute;
width: 25px;
height: 25px;
background: radial-gradient(circle at 25px 25px, blue, #000);
border-radius: 100%;
animation: share6_var5 3s linear infinite;
}
@keyframes share6_var5 {
0%{bottom: 85%; left: 82%;}
50%, 80%{transform: rotate(360deg); bottom: 50%; left:50%;}
100%{transform: rotate(360deg); bottom: 85%; left:82%;}
}
.shar8_var5 {
position: absolute;
width: 25px;
height: 25px;
background: radial-gradient(circle at 25px 25px, pink, #000);
border-radius: 100%;
animation: share8_var5 3s linear infinite;
}
@keyframes share8_var5 {
0%{bottom: 85%; left: 12%;}
50%, 80%{transform: rotate(360deg); bottom: 50%; left:50%;}
100%{transform: rotate(360deg); bottom: 85%; left:12%;}
}