[Из песочницы] Как создать анимированную колбу, используя CSS15.02.2016 13:18

Сегодня хочу рассказать о том, как я создавал анимированную колбу, используя только CSS3. Полученный результат можно увидеть здесь. Ну что интересно? Тогда давай приступим!

Изучаем задачу


Колба состоит из множества разносторонних фигур, но возможности CSS ограничены и не позволяют нам создавать такого рода элементы. Как же мы поступим? Мы реализуем их с помощью треугольников и прямоугольников.

  • Псевдоэлементы : Before и : After
  • Position, top, right, bottom, left, z-index
  • 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 пикселей и высоту 250 пикселей. В результате мы имеем прямоугольник.

image

Теперь начинается самое интересное! Как же мы сделаем треугольник?! Для этого я буду использовать псевдоэлементы : before и : after. Используя их, мы создадим прямоугольные треугольники и расположим их поверх белого прямоугольника с левого и с правого края соответственно. Таким образом, скрыв часть его площади.

image

Но сначала нам требуется сделать прямоугольные треугольники. Для этого я добавлю следующий 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. И у нас получился треугольник!

image

Создаем элементы основания


Теперь мы перейдем к реализации элементов основания. Для этого добавлю следующую разметку:


И стилизую ее при помощи следующего кода: 

.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 — для указания точки, вокруг которой будем вращать элементы. Также, используя абсолютное позиционирование, располагаем элементы по своим местам. В результате мы получим:

image

Создаем горлышко и его элементы


Для создания горлышка нам потребуется создать прямоугольник с размерами 62 пикселей на 152 пикселей и поместить внутрь все 4 элемента. Для этого я добавлю следующую разметку:


И 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;
}


Принцип расположения элементов точно такой же как и у элементов основания. Так что это задача уже не должна вызывать у вас сложности! В результате у нас получилась законченная колба!

image

Анимация пузырьков


У нас будет загружаться колба и через некоторое время из нее будут появляться пузырьки. Они будут разного размера и цвета. Периодичность появления будет разной.

Для реализации пузырьков мы будем использовать современные возможности CSS, а именно свойство border-radius. С помощью данного свойства можно скруглить углы у элемента. Теперь мы создадим 3 разноцветных пузырька одного размера, один чуть большего, и еще один большого размера. Для этого нам понадобится добавить следующую разметку:


И добавим 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 от начальной координаты до -200 px. Параллельно движению по оси 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. Спасибо!

Демо
Демо с 3 колбами

© Habrahabr.ru