如何从三角形过渡到圆形

Question

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

这是我的 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/

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

谢谢！

Answer 1

改变

a:hover .tri-Up,
a:focus .tri-Up {
  -webkit-clip-path:circle(50%,50%,75%);
  clip-path: circle(50%,50%,75%);
}

到这个

a:hover .tri-Up,
a:focus .tri-Up {
  -webkit-clip-path: circle(50px at 50px 50px);
  clip-path: circle(50px at 50px 50px);
}

这是一个演示

.tri-Up {
  height: 100px;
  width: 100px;
  -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(50px at 50px 50px);
  clip-path: circle(50px at 50px 50px);
}

<div class="col-sm-4">
  <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">

    <img src="http://placehold.it/560x484" class="tri-Up img-responsive" alt="">
  </a>
</div>

Answer 2

您需要更改圆的剪辑路径。

已修改 CSS：

.tri-Up {
    height: 100px;
    width: 100px;
    -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(50px at 50px 50px);
}

JSfiddle：http://jsfiddle.net/kjaog69j/1/

尽管建议不要使用 clip-path 但使用简单的高度、宽度和边框半径来定义 polygon/shapes。

Answer 3

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

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

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

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>

如何从三角形过渡到圆形

How to transition from a triangle to a circle

html

css

css-transitions

polygon