Как сделать анимированный блок. Соты на HTML/CSS

Сейчас мы создадим с вами анимированный блок из сот используя только HTML и CSS. Его можно установить на любую веб-страницу и применять по своему назначению. Размеры блока адаптируем под мобильные устройства, но если вы захотите увеличить, это не составит большого труда, просто, пропорционально изменяются размеры шрифтов, картинок и координаты.

Для работы нам понадобится заготовка, в виде объединенного шестиугольника с треугольником. Её можно нарисовать в любом векторном редакторе, но мы сделаем это с помощью svg-фигуры.

Координаты всем вершин можно посчитать, разместив фигуру на системе координат (подробно делаем в видео). Итоговый код svg-фигуры:

<svg viewBox="0 0 212.5 212.5">
    <polygon fill="url(#hexagonBg1)" points="86.6 0, 173 50, 173 150, 147 165, 151.5 212.5, 112.5 185, 86.6 200, 0 150, 0 50" />

    <defs>
        <linearGradient id="hexagonBg1"
                        x1="0%" y1="0%" x2="50%" y2="100%">
            <stop offset="30%" stop-color="#fec200"></stop>
            <stop offset="80%" stop-color="#ff5d14"></stop>
        </linearGradient>
    </defs>
</svg>

На следующем этапе создаем еще 5 копий фигуры и развернув каждую с шагом в 60⁰.

Поверх блока размещаем текст с использованием абсолютного позиционирования.

<div class="hexagon__block hexagon__block-1">
    <!--Создаем родительский блок, относительного которого будем использовать абсолютное позиционирование-->
    <div>
    	<!--Используем блок как фон, в виде нижнего слоя-->
        <div class="hexagon__background">
            <svg viewBox="0 0 212.5 212.5">
                <polygon fill="url(#hexagonBg1)" points="86.6 0, 173 50, 173 150, 147 165, 151.5 212.5, 112.5 185, 86.6 200, 0 150, 0 50" />

                <defs>
                    <linearGradient id="hexagonBg1"
                                    x1="0%" y1="0%" x2="50%" y2="100%">
                        <stop offset="30%" stop-color="#fec200"></stop>
                        <stop offset="80%" stop-color="#ff5d14"></stop>
                    </linearGradient>
                </defs>
            </svg>
        </div>
    	<!--Текстовый блок-->
        <div class="hexagon__info">
            <div>
                <div class="hexagon__step">
                    STEP
                    <span>01</span>
                </div>
                <div class="hexagon__text">
                    <h4>Instagram</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur.</p>
                    <img src="img/1.svg" alt="">
                </div>
            </div>
        </div>
    </div>
</div>

Центральный блок с текстом:

<div class="hexagon__middle">
    <h3>Social media</h3>
    <p>Lorem ipsum dolor sit amet, consectetur. Lorem ipsum dolor sit.</p>
    <img src="img/like.svg" alt="">
</div>

Верстка готова, остается прописать стили, которые и сделают основную работу. Для написания будем использовать SASS.

/* Сброс всех стандартных отступов */
* {
  padding: 0;
  margin:0;
  font-family: Oswald, serif;
}

/* Создаем стили для сот (шестиугольников) */
.hexagon {
  /* Область ограничена разрами под мобильные устройства */
  &__wrapper {
    position: relative;
    width:352px;
    height: 337px;
    margin:50px auto;
  }

  /* Стили отдельно взятой соты */
  &__block {
    width:140px;
    height:140px;
    position:absolute;

    & > div {
      position: relative;
    }

    /* Стиль для первой соты, остальные похожие, отличаются отступами и добавлен поворот на 60 градусов */
    &-1 {
      /* Задаем позиции для старта анимации (-60px по горизотали и вертикали) */
      top:-60px;
      left:0;
      opacity: 0;
      /* Запускаем анимацию showBlock1 длительностью в 1 сек с задержкой 0.5 сек */
      animation: showBlock1 1s 1;
      animation-fill-mode: forwards;
      animation-delay: .5s;

      /* Стили для текстового блока внутри соты */
      .hexagon__info {
        width:114px;
        padding-top:33px;
      }
    }

    &-2 {
      top:-52px;
      left:216px;
      opacity: 0;
      animation: showBlock2 1s 1;
      animation-fill-mode: forwards;
      animation-delay: 1s;

      .hexagon__background {
        transform: rotate(60deg);
      }

      .hexagon__info {
        width: 114px;
        padding-top: 25px;
        padding-left: 12px;
      }
    }

    &-3 {
      top:104px;
      left:272px;
      opacity: 0;
      animation: showBlock3 1s 1;
      animation-fill-mode: forwards;
      animation-delay: 1.5s;

      .hexagon__background {
        transform: rotate(120deg);
      }

      .hexagon__info {
        width: 114px;
        padding-top: 31px;
        padding-left: 25px;
      }
    }

    &-4 {
      top:252px;
      left:212px;
      opacity: 0;
      animation: showBlock4 1s 1;
      animation-fill-mode: forwards;
      animation-delay: 2s;

      .hexagon__background {
        transform: rotate(180deg);
      }

      .hexagon__info {
        width: 114px;
        padding-top: 45px;
        padding-left: 26px;
      }
    }

    &-5 {
      top:244px;
      left:-14px;
      opacity: 0;
      animation: showBlock5 1s 1;
      animation-fill-mode: forwards;
      animation-delay: 2.5s;

      .hexagon__background {
        transform: rotate(240deg);
      }

      .hexagon__info {
        width: 114px;
        padding-top: 53px;
        padding-left: 14px;
      }
    }

    &-6 {
      top:88px;
      left:-60px;
      opacity: 0;
      animation: showBlock6 1s 1;
      animation-fill-mode: forwards;
      animation-delay: 3s;

      .hexagon__background {
        transform: rotate(300deg);
      }

      .hexagon__info {
        width: 114px;
        padding-top: 47px;
        padding-left: 1px;
      }
    }
  }

  /* Блок с сотой является фоном и имеет абсолютное позиционирование относительно родителя */
  &__background {
    position:absolute;
    width:100%;
  }

  &__info {
    position: relative;

    & > div {
      display: flex;
      justify-content: center;
    }
  }

  /* Размеры текста заданы с учетом того, чтобы нормально отображались на мобильных устройствах */
  &__step {
    font-size:12px;
    text-transform: uppercase;
    text-align: center;
    padding: 0 5px;
    width: 35px;
    color:#fff;
    text-shadow: 1px 1px rgba(0,0,0,.3);
    margin-top:8px;

    & > span {
      font-size:30px;
      display: block;
      margin-top:-12px;
    }
  }

  &__text {
    font-size:11px;
    padding:0 5px;

    & h4 {
      text-transform: uppercase;
    }

    & p {
      font-size:9px;
      line-height: 11px;
    }

    & img {
      width:18px;
      margin: 7px 0 0 10px;
      opacity: .7;
    }
  }

  /* Блок внутри между сотами с описанием */
  &__middle {
    position:absolute;
    top:140px;
    left:calc(50% - 42px);
    text-align:center;
    width:85px;
    font-size:12px;
    opacity: .4;
    /* Задана анимация увеличения до появления, после анимации всех сот */
    transform: scale(0);
    animation: middle 1s 1;
    animation-fill-mode: forwards;
    animation-delay: 3.5s;

    & h3 {
      text-transform: uppercase;
    }

    & p {
      font-size:8px;
      line-height: 10px;
      padding:0 10px 5px;
    }

    & img {
      width:18px;
    }
  }
}

/* Анимация (движение) */
@keyframes showBlock1 {
  100% {
    top:0;
    left:60px;
    opacity:1;
  }
}

@keyframes showBlock2 {
  100% {
    top:8px;
    left:166px;
    opacity:1;
  }
}

@keyframes showBlock3 {
  100% {
    top:104px;
    left:212px;
    opacity:1;
  }
}

@keyframes showBlock4 {
  100% {
    top:192px;
    left:152px;
    opacity:1;
  }
}

@keyframes showBlock5 {
  100% {
    top:184px;
    left:46px;
    opacity:1;
  }
}

@keyframes showBlock6 {
  100% {
    top:88px;
    left:0px;
    opacity:1;
  }
}

/* Анимация (увеличение) */
@keyframes middle {
  100% {
    transform: scale(1);
  }
}

.color-white {
  color:#fff;
}

На этом все, для просмотра доступно демо. Если у вас остались вопрос или пожелания, пишите в комментариях.