Как создать анимированную колбу, используя CSS

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


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


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


  • Псевдоэлементы :Before и :After
  • Position, top, right, bottom, left, z-index
  • Border, width и height

Реализация основания колбы


Основание имеет треугольную форму, поэтому мы и сделаем его с помощью треугольника. Для этого я создам следующую разметку:


<div class="flask">
    <div class="flask__bottom">
        <div class="flask__triangle"></div>
    </div>
</div>

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


body {
  background-color: #292548;
}

.flask {
  height: 405px;
  width: 368px;

  position: absolute;
  bottom: 0;
}

.flask__bottom {
  position: absolute;
  bottom: 0;
}

.flask__triangle {
  width: 368px;
  height: 250px;

  overflow: hidden;
  position: relative;

  background-color: #fff;
}

Основание я закрепил в нижней части колбы, используя свойства position: absolute и bottom: 0. Далее задал ему ширину 368 пикселей и высоту 250 пикселей. В результате мы имеем прямоугольник.


image


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


image


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


.flask__triangle::before,
.flask__triangle::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 250px solid #292548;

  position: absolute;
  top: 0;
  z-index: 100;
}

.flask__triangle::before {
  border-right: 152px solid transparent;
  left: 0;
}

.flask__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


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


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


<div class="flask">
    <div class="flask_bottom">
        <div class="flask__triangle">
            <div class="flask__bottom-one"></div>
            <div class="flask__bottom-two"></div>
            <div class="flask__bottom-five"></div>
            <div class="flask__bottom-six"></div>
            <div class="flask__bottom-seven"></div>
            <div class="flask__bottom-eight"></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 {
  width: 0;
  height: 0;

  border-bottom: 165px solid #4266c0;
  border-left: 93px solid transparent;
  border-right: 200px solid transparent;

  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.flask__bottom-five {
  width: 100%;
  height: 75px;

  background-color: #4248c0;

  position: absolute;
  bottom: 18px;
  left: 50px;
  z-index: 3;

  transform: rotate(24deg);
  transform-origin: left top;
}

.flask__bottom-six {
  width: 100%;
  height: 170px;

  background-color: #37acdd;

  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.flask__bottom-seven {
  width: 100%;
  height: 218px;

  background-color: #1493c8;

  position: absolute;
  right: -95px;
  bottom: 24px;
  z-index: 3;

  transform: rotate(24deg);
  transform-origin: right top;
}

.flask__bottom-eight {
  width: 100%;
  height: 50px;

  background-color: #5c30ae;

  position: absolute;
  right: -95px;
  bottom: 218px;
  z-index: 3;

  transform: rotate(-12deg);
  transform-origin: left top;
}

Важным шагом при создании элементов является сохранение треугольной формы основания. При позиционирования ее частей они будут выходить за пределы треугольника, поэтому я добавил свойство overflow с значением hidden для их родителя.


Далее нам надо создать 6 элементов и, используя свойства transform( с значением rotate) и transform-origin, расположить их как нам нужно. В нашем случае трансформация нужна для того, чтобы повернуть элементы, а transform-origin – для указания точки, вокруг которой будем вращать элементы. Также, используя абсолютное позиционирование, располагаем элементы по своим местам. В результате мы получим:


image


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


Для создания горлышка нам потребуется создать прямоугольник с размерами 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="flask__triangle">
            <div class="flask__bottom-one"></div>
            <div class="flask__bottom-two"></div>
            <div class="flask__bottom-five"></div>
            <div class="flask__bottom-six"></div>
            <div class="flask__bottom-seven"></div>
            <div class="flask__bottom-eight"></div>
        </div>
    </div>
</div>

И css:


.flask__throat {
  width: 64px;
  height: 155px;
  overflow: hidden;

  position: absolute;
  top: 0;
  left: 152px;
}

.flask__throat-one {
  width: 150px;
  height: 50px;

  background-color: #5c30ae;

  position: absolute;
  top: 110px;
  right: -26px;
  z-index: 3;

  transform: rotate(24deg);
  transform-origin: right top;
}

.flask__throat-two {
  width: 150px;
  height: 60px;

  background-color: #37acdd;

  position: absolute;
  top: 35px;
  right: -35px;
  z-index: 3;

  transform: rotate(20deg);
  transform-origin: right top;
}

.flask__throat-three {
  width: 100%;
  height: 50px;

  background-color: #5c30ae;

  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 3;
}

.flask__throat-four {
  width: 150px;
  height: 20px;

  background-color: #6c49ac;

  position: absolute;
  top: 100px;
  right: -45px;
  z-index: 3;

  transform: rotate(20deg);
  transform-origin: right top;
}

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


image


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


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


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


<div class="flask">
    <div class="circle circle_small"></div>
    <div class="circle circle_middle"></div>
    <div class="circle circle_little circle_little-white"></div>
    <div class="circle circle_little circle_little-purpure"></div>
    <div class="circle circle_little circle_little-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="flask__triangle">
            <div class="flask__bottom-one"></div>
            <div class="flask__bottom-two"></div>
            <div class="flask__bottom-five"></div>
            <div class="flask__bottom-six"></div>
            <div class="flask__bottom-seven"></div>
            <div class="flask__bottom-eight"></div>
        </div>
    </div>
</div>

И добавим css:


.circle {
  border-radius: 50%;
  border: 1px solid #fff;

  position: absolute;
  top: 30px;
  left: 48%;
}

.circle_small {
    width: 20px;
    height: 20px;
}

.circle_middle {
    width: 45px;
    height: 45px;
    margin-left: 2px;
    left: 42%;
}

.circle_little {
    width: 5px;
    height: 5px;
    margin-left: 4px;
}

.circle_little-white {
  background-color: #fff;
}

.little_circle_purpure {
  background-color: #6c49ac;
  border: 1px solid #6c49ac;
}

.circle_little-blue {
  background-color: #117fba;
  border: 1px solid #117fba;
}

Следующим шагом будет создание сценария анимации, используя свойство @ 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;
}

.circle_little-white {
  animation-duration: 4200ms;
}

.circle_little-purpure {
  animation-duration: 4200ms;
  animation-delay: 200ms;
}

.circle_little-blue {
  animation-duration: 4200ms;
  animation-delay: 600ms;
}

@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,
.flask__throat-two,
.flask__throat-three,
.flask__throat-four {
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-delay: 0s;
}

.flask__throat-one,
.flask__throat-three {
  animation-name: animation_bg_element6;
}

.flask__throat-two {
  animation-name: animation_bg_element5;
}

.flask__throat-four {
  animation-name: animation_bg_element7;
}           

.flask__bottom-one,
.flask__bottom-two,
.flask__bottom-five,
.flask__bottom-six,
.flask__bottom-seven,
.flask__bottom-eight {
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-delay: 0s;
}

.flask__bottom-one {
  animation-name: animation_bg_element1;
}

.flask__bottom-two {
  animation-name: animation_bg_element2;
}

.flask__bottom-five {
  animation-name: animation_bg_element3;
}

flask__bottom-six {
  animation-name: animation_bg_element4;
}

.flask__bottom-seven {
  animation-name: animation_bg_element5;
}

.flask__bottom-eight {
  animation-name: animation_bg_element6;
}

Заключение


В этой статье я показал вам современные возможности CSS. Я надеюсь, что у вас появится интерес к этому, и вы сможете создавать эффектные работы. Спасибо!


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

  • +7
  • 17,8k
  • 8
Поделиться публикацией

Комментарии 8

    0
    А где заключительный пример с анимацией?!
    В студию, пожалуйста!!!
      0
      Вот пример, который описал в статье. stas-melnikov.ru/articles/css_flask/demo Или более сложный(с 3 колбами) — stas-melnikov.ru/the-animated-flask-css3
        0
        просто я статью читаю — кусок кода, скриншот, кусок кода, скриншот — все круто, видно прогресс, прикольно. Затем, после финального куска кода, ищу кульминационный скриншот (даже анимацию обещали!) и — ничего. Весь wow-эффект пропадает :-)
          0
          он был, но я убрал его и выложил на GitHub. Можете там посмотреть.
            0
            теперь, с демо-ссылками, все супер!
              0
              Спасибо!
      –1
      не плохо
        0
        спасибо!

      Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

      Самое читаемое