Сегодня хочу рассказать о том, как я создавал анимированную колбу, используя только CSS3. Полученный результат можно увидеть здесь. Ну что интересно? Тогда давай приступим!
Изучаем задачу
Колба состоит из множества разносторонних фигур, но возможности CSS ограничены и не позволяют нам создавать такого рода элементы. Как же мы поступим? Мы реализуем их с помощью треугольников и прямоугольников.
- Псевдоэлементы :Before и :After
- Position, top, right, bottom, left, z-index
- Border, width и height
Реализация основания колбы
Основание имеет треугольную форму, поэтому мы и сделаем его с помощью треугольника. Для этого я создам следующую разметку:
<div class="flask">
<div class="flask_bottom">
<div class="big_triangle"></div>
</div>
</div>Я использую основной элемент с классом flask, в котором будет располагаться основание с классом flask_bottom. В него мы добавили заготовку для будущего треугольника. Далее я стилизую разметку:
body {
background-color: #292548;
}
.flask {
height: 405px;
width: 368px;
position: absolute;
bottom: 0;
}
.flask_bottom {
bottom: 0;
position: absolute;
}
.big_triangle {
overflow: hidden;
position: relative;
width: 368px;
height: 250px;
background-color: #fff;
}Основание я закрепил в нижней части колбы, используя свойства position: absolute и bottom: 0. Далее задал ему ширину 368 пикселей и высоту 250 пикселей. В результате мы имеем прямоугольник.
Теперь начинается самое интересное! Как же мы сделаем треугольник?! Для этого я буду использовать псевдоэлементы :before и :after. Используя их, мы создадим прямоугольные треугольники и расположим их поверх белого прямоугольника с левого и с правого края соответственно. Таким образом, скрыв часть его площади.
Но сначала нам требуется сделать прямоугольные треугольники. Для этого я добавлю следующий CSS код:
.big_triangle:before, .big_triangle:after {
content: "";
display: block;
width: 0;
height: 0;
border-top: 250px solid #292548;
position: absolute;
top: 0;
z-index: 100;
}
.big_triangle:before {
border-right: 152px solid transparent;
left: 0;
}
.big_triangle:after {
border-left: 152px solid transparent;
right: 0;
}Основная техника создания CSS треугольников — использоние свойства border. Но сначала нужно установить ширину и высоту элементов равные 0, для правильного рассчета размера треугольников. Дальше для них задаю свойство border-top равное 250 пикселей и цветом #292548(цвет фона). Далее для левого треугольника указываю свойство border-left с значением 152 пикселя. Тоже самое сделаю и для правого треугольника, только вместо border-left пропишу border-right. После чего располагаю их по краям прямоугольника, используя свойства left и right. И у нас получился треугольник!
Создаем элементы основания
Теперь мы перейдем к реализации элементов основания. Для этого добавлю следующую разметку:
<div class="flask">
<div class="flask_bottom">
<div class="big_triangle">
<div class="flask_bottom_one"></div>
<div class="flask_bottom_two"></div>
<div class="flask_bottom_three"></div>
<div class="flask_bottom_four"></div>
<div class="flask_bottom_five"></div>
<div class="flask_bottom_six"></div>
</div>
</div>
</div>И стилизую ее при помощи следующего кода:
.flask_bottom_one {
width: 0;
height: 0;
border-bottom: 55px solid #3a2481;
border-left: 32px solid transparent;
border-right: 42px solid transparent;
position: absolute;
bottom: 0;
z-index: 4;
}
.flask_bottom_two {
border-bottom: 165px solid #4266c0;
border-left: 93px solid transparent;
border-right: 200px solid transparent;
width: 0;
height: 0;
position: absolute;
left: 0;
bottom: 0;
z-index: 2;
}
.flask_bottom_three {
position: absolute;
background-color: #4248c0;
width: 100%;
height: 75px;
position: absolute;
z-index: 3;
left: 50px;
bottom: 18px;
transform: rotate(24deg);
transform-origin: left top;
}
.flask_bottom_four {
position: absolute;
background-color: #37acdd;
width: 100%;
height: 170px;
position: absolute;
z-index: 1;
right: 0;
bottom: 0;
}
.flask_bottom_five {
position: absolute;
background-color: #1493c8;
width: 100%;
height: 218px;
position: absolute;
z-index: 3;
right: -95px;
bottom: 24px;
transform: rotate(24deg);
transform-origin: right top;
}
.flask_bottom_six {
position: absolute;
background-color: #5c30ae;
width: 100%;
height: 50px;
position: absolute;
z-index: 3;
right: -95px;
bottom: 218px;
transform: rotate(-12deg);
transform-origin: left top;
}Важным шагом при создании элементов является сохранение треугольной формы основания. При позиционирования внутренних элементов, они будут выходить за пределы треугольника. Чтобы избежать это, я добавил к классу big_triangle свойство overflow с значением hidden. Когда браузер прочитает данное свойство, то он скроет все, что выходит за пределы элемента с классом big_triangle.
Далее нам надо создать 6 элементов и, используя свойства transform( с значением rotate) и transform-origin, расположить их как нам нужно. В нашем случае трансформация нужна для того, чтобы повернуть элементы, а transform-origin – для указания точки, вокруг которой будем вращать элементы. Также, используя абсолютное позиционирование, располагаем элементы по своим местам. В результате мы получим:
Создаем горлышко и его элементы
Для создания горлышка нам потребуется создать прямоугольник с размерами 62 пикселей на 152 пикселей и поместить внутрь все 4 элемента. Для этого я добавлю следующую разметку:
<div class="flask">
<div class="flask_throat">
<div class="flask_throat_one"></div>
<div class="flask_throat_two"></div>
<div class="flask_throat_three"></div>
<div class="flask_throat_four"></div>
</div>
<div class="flask_bottom">
<div class="big_triangle">
<div class="flask_bottom_one"></div>
<div class="flask_bottom_two"></div>
<div class="flask_bottom_three"></div>
<div class="flask_bottom_four"></div>
<div class="flask_bottom_five"></div>
<div class="flask_bottom_six"></div>
</div>
</div>
</div>И css:
.flask_throat {
overflow: hidden;
height: 155px;
width: 64px;
position: absolute;
left: 152px;
top: 0;
}
.flask_throat_one {
position: absolute;
transform: rotate(24deg);
transform-origin: right top;
background-color: #5c30ae;
width: 150px;
height: 50px;
position: absolute;
z-index: 3;
right: -26px;
top: 110px;
}
.flask_throat_two {
position: absolute;
transform: rotate(20deg);
transform-origin: right top;
background-color: #37acdd;
width: 150px;
height: 60px;
position: absolute;
z-index: 3;
right: -35px;
top: 35px;
}
.flask_throat_three {
position: absolute;
background-color: #5c30ae;
width: 100%;
height: 50px;
position: absolute;
z-index: 3;
right: 0;
bottom: 0;
}
.flask_throat_four {
position: absolute;
transform: rotate(20deg);
transform-origin: right top;
background-color: #6c49ac;
width: 150px;
height: 20px;
position: absolute;
z-index: 3;
right: -45px;
top: 100px;
}Принцип расположения элементов точно такой же как и у элементов основания. Так что это задача уже не должна вызывать у вас сложности! В результате у нас получилась законченная колба!
Анимация пузырьков
У нас будет загружаться колба и через некоторое время из нее будут появляться пузырьки. Они будут разного размера и цвета. Периодичность появления будет разной.
Для реализации пузырьков мы будем использовать современные возможности CSS, а именно свойство border-radius. С помощью данного свойства можно скруглить углы у элемента. Теперь мы создадим 3 разноцветных пузырька одного размера, один чуть большего, и еще один большого размера. Для этого нам понадобится добавить следующую разметку:
<div class="flask">
<div class="circle small_circle"></div>
<div class="circle middle_circle"></div>
<div class="circle little_circle little_circle_white"></div>
<div class="circle little_circle little_circle_purpure"></div>
<div class="circle little_circle little_circle_blue"></div>
<div class="flask_throat">
<div class="flask_throat_one"></div>
<div class="flask_throat_two"></div>
<div class="flask_throat_three"></div>
<div class="flask_throat_four"></div>
</div>
<div class="flask_bottom">
<div class="big_triangle">
<div class="flask_bottom_one"></div>
<div class="flask_bottom_two"></div>
<div class="flask_bottom_three"></div>
<div class="flask_bottom_four"></div>
<div class="flask_bottom_five"></div>
<div class="flask_bottom_six"></div>
</div>
</div>
</div>И добавим css:
.circle {
border-radius: 50%;
border: 1px solid #fff;
position: absolute;
left: 45%;
top: 30px;
}
.little_circle {
width: 5px;
height: 5px;
}
.little_circle_white {
background-color: #fff;
left: 48%;
}
.little_circle_purpure {
background-color: #6c49ac;
border: 1px solid #6c49ac;
left: 52%;
}
.little_circle_blue {
background-color: #117fba;
border: 1px solid #117fba;
left: 45%;
}
.small_circle {
width: 20px;
height: 20px;
}
.middle_circle {
width: 45px;
height: 45px;
}Следующим шагом будет создание сценария анимации, используя свойство @ keyframes. Сам сценарий будет следующим. При загрузке страницы пузырьки имеют начальные координаты 20 пикселей по оси Y. При запуске анимации пузырьки начинают двигаться по оси Y от начальной координаты до -200px. Параллельно движению по оси Y пузырьки будут постепенно удаляться от пользоваться. Для этого мы используем свойство transform. Также, при движении пузырьков они плавно исчезают с помощью свойства opacity.
Сценарий создан, теперь нам требуется указать его в классе circle. Для этого используем свойство animation-name и указываем имя сценария – circle. Далее, для каждого пузырька установим задержку при помощи animation-delay, и таким образом они будут появляться в разный промежуток времени. Последним шагом будет установить параметр animation-iteration-count для бесконечного повторения сценария анимации.
.circle {
animation-name: circle;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-delay: 0s;
}
.little_circle_white {
animation-duration: 2000ms;
}
.little_circle_purpure {
animation-duration: 2000ms;
animation-delay: 100ms;
}
.little_circle_blue {
animation-duration: 2000ms;
animation-delay: 200ms;
}
.small_circle {
animation-duration: 4200ms;
animation-delay: 300ms;
}
@keyframes circle {
0% {
transform: translateZ(0px) translateY(20px) scale(1);
opacity: 1;
}
85% {
opacity: 0;
}
100% {
transform: translateZ(0px) translateY(-200px) scale(0);
opacity: 0;
}
}Анимация колбы
Для анимации колбы я создал для каждого элемента свой сценарий:
@keyframes animation_bg_element1 {
0% {
border-bottom-color: #3a2481;
}
25% {
border-bottom-color: #242781;
}
50% {
border-bottom-color: #244081;
}
75% {
border-bottom-color: #242781;
}
}
@keyframes animation_bg_element2 {
0% {
border-bottom-color: #4266c0;
}
25% {
border-bottom-color: #4287c0;
}
50% {
border-bottom-color: #42a8c0;
}
75% {
border-bottom-color: #4287c0;
}
}
@keyframes animation_bg_element3 {
0% {
background-color: #4248c0;
}
25% {
background-color: #4269c0;
}
50% {
background-color: #428ac0;
}
75% {
background-color: #4269c0;
}
}
@keyframes animation_bg_element4 {
0% {
background-color: #37acdd;
}
25% {
background-color: #37d8dd;
}
50% {
background-color: #37ddb5;
}
75% {
background-color: #37d8dd;
}
}
@keyframes animation_bg_element5 {
0% {
background-color: #1493c8;
}
25% {
background-color: #14c2c8;
}
50% {
background-color: #14c89d;
}
75% {
background-color: #14c2c8;
}
}
@keyframes animation_bg_element6 {
0% {
background-color: #5c30ae;
}
25% {
background-color: #3a30ae;
}
50% {
background-color: #3048ae;
}
75% {
background-color: #3a30ae;
}
}
@keyframes animation_bg_element7 {
0% {
background-color: #6c49ac;
}
25% {
background-color: #5249ac;
}
50% {
background-color: #495aac;
}
75% {
background-color: #5249ac;
}
}Теперь я добавлю вызов анимации в каждом классе:
.flask_throat_one {
animation-name: animation_bg_element6;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-delay: 0s;
}
.flask_throat_two {
animation-name: animation_bg_element5;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-delay: 0s;
}
.flask_throat_three {
animation-name: animation_bg_element6;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-delay: 0s;
}
.flask_throat_four {
animation-name: animation_bg_element7;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-delay: 0s;
}
.flask_bottom_one {
animation-name: animation_bg_element1;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-delay: 0s;
}
.flask_bottom_two {
animation-name: animation_bg_element2;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-delay: 0s;
}
.flask_bottom_three {
animation-name: animation_bg_element3;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-delay: 0s;
}
.flask_bottom_four {
animation-name: animation_bg_element4;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-delay: 0s;
}
.flask_bottom_five {
animation-name: animation_bg_element5;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-delay: 0s;
}
.flask_bottom_six {
animation-name: animation_bg_element6;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-delay: 0s;
}Заключение
В этой статье я показал вам современные возможности CSS. Я надеюсь, что у вас появится интерес к этому, и вы сможете создавать эффектные работы. Весь код я сохранил на GitHub. Спасибо!
Автор: melnik909
