如何让六边形变成三角形（动画）

Question

我有一个关于如何将六边形变成三角形的问题。所以动画从六边形开始，它转换或变形为三角形，然后返回到六边形（无限迭代）

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

Answer 1

我知道这不是 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/

Answer 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

如何让六边形变成三角形（动画）

How can I let a hexagon morph into a triangle (animation)

css

animation

transition

morphing