В этом примере мы будем создавать анимированную колбу с пузырьками средствами CSS3. Очень часто, когда мы хотим создать анимацию, мы думаем об использовании JavaScript, но иногда создать анимацию можно используя возможности CSS3. Мы можем нарисовать основные элементы, такие как прямоугольники, круги и треугольники с помощью псевдо-классов CSS3.
Изучаем задачи.
Колба состоит из множества разнообразных форм, но возможности CSS3 ограничены и не позволяют создавать сложные элементы. Поэтому чтобы решить эту задачу и изобразить колбу, можно использовать треугольники и прямоугольники.
Для этого мы будем использовать следующие свойства
CSS.
1-Псевдо-элементы :before и :after
2-Позиционирования top, right, bottom, left и z-index.
3-border, width и height.
Основание колбы.
Основание имеет треугольную форму, поэтому мы сделаем его с помощью треугольника.
Для этого нужно создать следующую разметку:
Основной элемент с классом 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 px. и высоту 250 px.
В результате мы имеем прямоугольник.
Теперь начинается самое интересное, как же теперь сделать треугольник?
Для этого мы будем использовать псевдо-классы :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 px. и цвет #292548 (Цвет фона).
Далее слева треугольника свойство border-left со значением 152 px.
Тоже самое делаем для прямоугольного треугольника , только вместо border-left испольуем border-right.
По краям прямоугольника используем свойства left и right.
Элементы основания.
Сейчас мы начнём реализовывать элементы базы.
Чтобы сделать это необходимо добавить следующую разметику:
Затем используем следующие стили CSS:
.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_five {
position: absolute;
background-color: #4248c0;
width: 100%;
height: 75px;
position: absolute;
z-index: 3;
left: 50px;
bottom: 18px;
-webkit-transform: rotate(24deg);
transform: rotate(24deg);
-webkit-transform-origin: left top;
transform-origin: left top;
}
.flask_bottom_six {
position: absolute;
background-color: #37acdd;
width: 100%;
height: 170px;
position: absolute;
z-index: 1;
right: 0;
bottom: 0;
}
.flask_bottom_seven {
position: absolute;
background-color: #1493c8;
width: 100%;
height: 218px;
position: absolute;
z-index: 3;
right: -95px;
bottom: 24px;
-webkit-transform: rotate(24deg);
transform: rotate(24deg);
-webkit-transform-origin: right top;
transform-origin: right top;
}
.flask_bottom_eight {
position: absolute;
background-color: #5c30ae;
width: 100%;
height: 50px;
position: absolute;
z-index: 3;
right: -95px;
bottom: 218px;
-webkit-transform: rotate(-12deg);
transform: rotate(-12deg);
-webkit-transform-origin: left top;
transform-origin: left top;
}
Важным шагом в создании элементов является сохранение треугольной формы основания. При установки внутренних элементов, они будут вне треугольника.
Чтобы избежать этого, можно добавить свойство overflow с значением hidden к классу big_triangle.
Когда браузер прочитает это свойство, он будет скрывать всё что выходит за пределы элемента с классом big_triangle.
Далее нам нужно создать 6 дополнительных элементов используя свойство transform ( со значением rotate) и transform-origin, располагая их так как нам нужно.
В нашем случае трансформация необходима чтобы вращать элементы и и transform-origin для указания точки вокруг которой будем вращать элементы. Также используя абсолютное позиционирование, мы имеем элементы на своих местах.
В результате мы получаем:
Верхняя часть и её элементы.
Для создания верхней части колбы нам нужно создать прямоугольник размером 62 на 152 px. и поместить внутрь все 4 элемента.
Рассмотрим следующую разметку:
И стили для этой разметки:
.flask_throat {
overflow: hidden;
height: 155px;
width: 64px;
position: absolute;
left: 152px;
top: 0;
}
.flask_throat_one {
position: absolute;
-webkit-transform: rotate(24deg);
transform: rotate(24deg);
-webkit-transform-origin: right top;
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;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
-webkit-transform-origin: right top;
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;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
-webkit-transform-origin: right top;
transform-origin: right top;
background-color: #6c49ac;
width: 150px;
height: 20px;
position: absolute;
z-index: 3;
right: -45px;
top: 100px;
}
Расположение элементов точно такое же как и у базы.
В итоге мы получаем готовую колбу!
Анимация пузырьков.
После того как будет загружена колба через некоторое время появляются пузырьки. Они будут разных размеров и цветов и время появления будет разным. Для реализации пузырьков сы будем использовать современные возможности CSS, а в частности свойство border-radius. Используя это свойство можно скруглить углы элемента.
Теперь создадим 3 разноцветных пузырька одинокого размера, один немного больше и ещё один более крупный.
Вот разметка:
Затем добавим стили CSS для пузырьков:
.circle {
border-radius: 50%;
border: 1px solid #fff;
position: absolute;
left: 45%;
top: 30px;
-webkit-animation-name: circle;
animation-name: circle;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.little_circle {
width: 5px;
height: 5px;
}
.little_circle_white {
background-color: #fff;
left: 48%;
-webkit-animation-duration: 2000ms;
animation-duration: 2000ms;
}
.little_circle_purpure {
background-color: #6c49ac;
border: 1px solid #6c49ac;
left: 52%;
-webkit-animation-duration: 2000ms;
animation-duration: 2000ms;
-webkit-animation-delay: 100ms;
animation-delay: 100ms;
}
.little_circle_blue {
background-color: #117fba;
border: 1px solid #117fba;
left: 45%;
-webkit-animation-duration: 2000ms;
animation-duration: 2000ms;
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
}
.small_circle {
width: 20px;
height: 20px;
-webkit-animation-duration: 4200ms;
animation-duration: 4200ms;
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
}
.middle_circle {
width: 45px;
height: 45px;
}
@-webkit-keyframes circle {
0% {
-webkit-transform: translateZ(0px) translateY(20px) scale(1);
transform: translateZ(0px) translateY(20px) scale(1);
opacity: 1;
}
85% {
opacity: 0;
}
100% {
-webkit-transform: translateZ(0px) translateY(-200px) scale(0);
transform: translateZ(0px) translateY(-200px) scale(0);
opacity: 0;
}
}
@keyframes circle {
0% {
-webkit-transform: translateZ(0px) translateY(20px) scale(1);
transform: translateZ(0px) translateY(20px) scale(1);
opacity: 1;
}
85% {
opacity: 0;
}
100% {
-webkit-transform: translateZ(0px) translateY(-200px) scale(0);
transform: translateZ(0px) translateY(-200px) scale(0);
opacity: 0;
}
}
Следующим шагом будет создание анимации с использованием @keyframes.
При загрузки страницы пузырьки находятся в начальной координате 20px. по оси Y.
Затем пузырьки начинают двигаться по оси Y от начала координат до 200px. Помимо этого движения, пузырьки будут двигаться дальше.
Для этого мы используем свойство transform.
Также при движении пузырьки постепенно исчезают, для этого используем свойства opacity.
Сценарий создан, теперь нам нужно указать это в классе circle.
Далее для каждого пузырька мы поставили задержку с помощью animation-delay, и таким образом они будут появляться в разные сроки. Последним шагом будет это установить animation-iteration-count на бесконечное значение для повторения сценария анимации.
Анимация колбы
Для анимации колбы я создал другой сценарий для каждого элемента:
@-webkit-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_element1 {
0% {
border-bottom-color: #3a2481;
}
25% {
border-bottom-color: #242781;
}
50% {
border-bottom-color: #244081;
}
75% {
border-bottom-color: #242781;
}
}
@-webkit-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_element2 {
0% {
border-bottom-color: #4266c0;
}
25% {
border-bottom-color: #4287c0;
}
50% {
border-bottom-color: #42a8c0;
}
75% {
border-bottom-color: #4287c0;
}
}
@-webkit-keyframes animation_bg_element3 {
0% {
background-color: #4248c0;
}
25% {
background-color: #4269c0;
}
50% {
background-color: #428ac0;
}
75% {
background-color: #4269c0;
}
}
@keyframes animation_bg_element3 {
0% {
background-color: #4248c0;
}
25% {
background-color: #4269c0;
}
50% {
background-color: #428ac0;
}
75% {
background-color: #4269c0;
}
}
@-webkit-keyframes animation_bg_element4 {
0% {
background-color: #37acdd;
}
25% {
background-color: #37d8dd;
}
50% {
background-color: #37ddb5;
}
75% {
background-color: #37d8dd;
}
}
@keyframes animation_bg_element4 {
0% {
background-color: #37acdd;
}
25% {
background-color: #37d8dd;
}
50% {
background-color: #37ddb5;
}
75% {
background-color: #37d8dd;
}
}
@-webkit-keyframes animation_bg_element5 {
0% {
background-color: #1493c8;
}
25% {
background-color: #14c2c8;
}
50% {
background-color: #14c89d;
}
75% {
background-color: #14c2c8;
}
}
@keyframes animation_bg_element5 {
0% {
background-color: #1493c8;
}
25% {
background-color: #14c2c8;
}
50% {
background-color: #14c89d;
}
75% {
background-color: #14c2c8;
}
}
@-webkit-keyframes animation_bg_element6 {
0% {
background-color: #5c30ae;
}
25% {
background-color: #3a30ae;
}
50% {
background-color: #3048ae;
}
75% {
background-color: #3a30ae;
}
}
@keyframes animation_bg_element6 {
0% {
background-color: #5c30ae;
}
25% {
background-color: #3a30ae;
}
50% {
background-color: #3048ae;
}
75% {
background-color: #3a30ae;
}
}
@-webkit-keyframes animation_bg_element7 {
0% {
background-color: #6c49ac;
}
25% {
background-color: #5249ac;
}
50% {
background-color: #495aac;
}
75% {
background-color: #5249ac;
}
}
@keyframes animation_bg_element7 {
0% {
background-color: #6c49ac;
}
25% {
background-color: #5249ac;
}
50% {
background-color: #495aac;
}
75% {
background-color: #5249ac;
}
}
Теперь я добавлю вызов анимации в каждом классе:
.flask_throat_one {
position: absolute;
-webkit-transform: rotate(24deg);
transform: rotate(24deg);
-webkit-transform-origin: right top;
transform-origin: right top;
background-color: #5c30ae;
width: 150px;
height: 50px;
position: absolute;
z-index: 3;
right: -26px;
top: 110px;
-webkit-animation-name: animation_bg_element6;
animation-name: animation_bg_element6;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.flask_throat_two {
position: absolute;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
-webkit-transform-origin: right top;
transform-origin: right top;
background-color: #37acdd;
width: 150px;
height: 60px;
position: absolute;
z-index: 3;
right: -35px;
top: 35px;
-webkit-animation-name: animation_bg_element5;
animation-name: animation_bg_element5;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.flask_throat_three {
position: absolute;
background-color: #5c30ae;
width: 100%;
height: 50px;
position: absolute;
z-index: 3;
right: 0;
bottom: 0;
-webkit-animation-name: animation_bg_element6;
animation-name: animation_bg_element6;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.flask_throat_four {
position: absolute;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
-webkit-transform-origin: right top;
transform-origin: right top;
background-color: #6c49ac;
width: 150px;
height: 20px;
position: absolute;
z-index: 3;
right: -45px;
top: 100px;
-webkit-animation-name: animation_bg_element7;
animation-name: animation_bg_element7;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.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;
-webkit-animation-name: animation_bg_element1;
animation-name: animation_bg_element1;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.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;
-webkit-animation-name: animation_bg_element2;
animation-name: animation_bg_element2;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.flask_bottom_five {
position: absolute;
background-color: #4248c0;
width: 100%;
height: 75px;
position: absolute;
z-index: 3;
left: 50px;
bottom: 18px;
-webkit-transform: rotate(24deg);
transform: rotate(24deg);
-webkit-transform-origin: left top;
transform-origin: left top;
-webkit-animation-name: animation_bg_element3;
animation-name: animation_bg_element3;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.flask_bottom_six {
position: absolute;
background-color: #37acdd;
width: 100%;
height: 170px;
position: absolute;
z-index: 1;
right: 0;
bottom: 0;
-webkit-animation-name: animation_bg_element4;
animation-name: animation_bg_element4;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.flask_bottom_seven {
position: absolute;
background-color: #1493c8;
width: 100%;
height: 218px;
position: absolute;
z-index: 3;
right: -95px;
bottom: 24px;
-webkit-transform: rotate(24deg);
transform: rotate(24deg);
-webkit-transform-origin: right top;
transform-origin: right top;
-webkit-animation-name: animation_bg_element5;
animation-name: animation_bg_element5;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.flask_bottom_eight {
position: absolute;
background-color: #5c30ae;
width: 100%;
height: 50px;
position: absolute;
z-index: 3;
right: -95px;
bottom: 218px;
-webkit-transform: rotate(-12deg);
transform: rotate(-12deg);
-webkit-transform-origin: left top;
transform-origin: left top;
-webkit-animation-name: animation_bg_element6;
animation-name: animation_bg_element6;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
Вывод
В этой статье были продемонстрированы возможности современной технологии CSS3. Я надеюсь, что это было интересно для вас, и вы сможете создавать впечатляющие работы.