html - 如何从三 Angular 形过渡到圆形

Question

我在 CSS 中用剪辑路径遮盖了一些图像以显示等边三 Angular 形。我希望它们在悬停时展开并变成圆圈。

这是我的 CSS:

.tri-Up {
    -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%);
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    transition: 2s;
}
a:hover .tri-Up,
a:focus .tri-Up {
  -webkit-clip-path:circle(50%,50%,75%);
  clip-path: circle(50%,50%,75%);
}

还有我的 HTML:

<div class="col-sm-4 portfolio-item dontwantpadding">
                    <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
                        <img src="img/photo.png" class="tri-Up img-responsive" alt="">
                    </a>
                </div>

还有一个 jsfiddle，其中转换不起作用: http://jsfiddle.net/kjaog69j/

我在网上找到了一些东西，但从三 Angular 形到圆形都没有，更不用说展开了。我广泛地在谷歌上搜索并浏览了“动画 CSS 形状、W3School 的 CSS 转换、CSStricks 等。任何建议或帮助将不胜感激。

谢谢!

Answer 1

一种试图将其推向极限的方法。这当然是实验性代码，因为据我所知，Chrome 仅支持它，而且以某种方式存在错误。

如果您不方便浏览器，则剪辑路径无法设置动画。也就是说，路径必须以某种方式等效。在您的情况下实现此目的的一种方法是将圆圈转换为非常宽的椭圆形。并将圆定义为椭圆，其中两个半径相等。

但这只能给我们三 Angular 形的一侧，所以我们需要 3 个嵌套元素，每个元素旋转 120 度，以获得三 Angular 形

div {
  position: absolute;
  transition: all 1s;
}

.container {
  width: 540px;
  height: 540px;
  left: 50px;
  top: 50px;
  overflow: hidden;

}
.test1 {
  width: 1600px;
  height: 1600px;
  -webkit-transform: rotate(120deg);
  top: -544px;
  left: -544px;
  -webkit-clip-path: ellipse( 1000px 196px at 800px 735px);
  z-index: 10;
}

.container:hover .test1 {
   -webkit-clip-path: ellipse( 256px 256px at 800px 800px); 
}


.test2 {
  width: 1100px;
  height: 1100px;
  top: 250px;
  left: 250px;
  -webkit-transform: rotate(120deg);
  -webkit-clip-path: ellipse( 1000px 196px at 550px 485px);
}

.container:hover .test2, .test2:hover {
   -webkit-clip-path: ellipse( 256px 256px at 550px 550px); 
}

.test3 {
  /* display: none; */
  width: 750px;
  height: 750px;
  top: 175px;
  left: 175px;
  -webkit-clip-path: ellipse( 1000px 196px at 375px 310px);
  -webkit-transform: rotate(120deg);
  background: url(http://placekitten.com/628/800);
}

.container:hover .test3, .test3:hover {
   -webkit-clip-path: ellipse( 256px 256px at 375px 375px); 
}

<div class="container">
<div class="test1">
<div class="test2">
<div class="test3">
</div>
</div>
</div>
</div>