Как я могу позволить шестиугольнику превратиться в треугольник (анимация)

У меня есть вопрос о том, как я могу превратить шестиугольник в треугольник. Таким образом, анимация начинается с шестиугольника, она превращается или превращается в треугольник, который затем возвращается к шестиугольнику (бесконечная итерация).

 <div class="hexagon"></div>
       <div id="triangle-up"></div>
 <div id="triangle-down"></div>

Мой код CSS

.hexagon {
    position: relative;
    width: 130px;
    height: 75.06px;
    background-color: #2196F3;
    margin: 0 auto;
    margin-top: 50px;

}

.hexagon:before,
.hexagon:after {
    content: "";
    position: absolute;
    width: 0;
    border-left: 65px solid transparent;
    border-right: 65px solid transparent;
}

.hexagon:before {
    bottom: 100%;
    border-bottom: 37.53px solid #2196F3;
}

.hexagon:after {
    top: 100%;
    width: 0;
    border-top: 37.53px solid #2196F3;
}


#triangle-up {
    width: 0;
    height: 0;
    margin: 0 auto;
    margin-top: -86px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #2196F3;
    animation: triangle-up_show;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-play-state: paused;

    animation-delay: 3s;
}



#triangle-down {
    width: 0;
    height: 0;
    margin: 0 auto;
    margin-top: -100px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid #2196F3;
    animation: triangle-down_show;
    animation-duration: 6s;
    animation-timing-function: linear;
    animation-play-state: paused;

}

@keyframes hexagon_hide {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes triangle-up_show {
    0%      { opacity: 0 }
    50%     { opacity: 1 }
    100%    { opacity: 0 }
}

@keyframes triangle-down_show {
    0%      { opacity: 0 }
    50%     { opacity: 1 }
    100%    { opacity: 0 }
}
Источник

2 ответа

Решение

В css это можно сделать с помощью многоугольного клипа и анимации:

.shape {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: red;
  width: 300px;
  height: 300px;
  animation: morph 2s infinite;
}
@keyframes morph {
     0% {clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);}
    50% {clip-path: polygon(50% 0%, 50% 0, 100% 0, 50% 100%, 0 0, 50% 0);}
    100% {clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);}
}
<div class="shape">

</div>

Я нахожу этот сайт http://bennettfeely.com/clippy/ хорошим инструментом для морфинга многоугольных клипов в css.

Источник

Я знаю, что это не CSS, но это можно сделать с помощью анимации SVG:

<svg id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300" xmlns:xlink="http://www.w3.org/1999/xlink">
  <polygon id="shape" class="hex">
    <animate
      dur="2.5s"
      repeatCount="indefinite"
      attributeName="points"
      values="300,150 225,280 75,280 0,150 75,20 225,20;
       300,20 150,280 150,280 0,20 75,20 225,20;
         300,20 150,280 150,280 0,20 75,20 225,20;
       300,150 225,280 75,280 0,150 75,20 225,20;
         300,150 225,280 75,280 0,150 75,20 225,20;"/>
  </polygon>
</svg>

Надеюсь, это поможет в любом случае:)

https://css-tricks.com/svg-shape-morphing-works/

Источник
Другие вопросы по тегам