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过渡，CSStricks等。任何建议或帮助将非常感激。

谢谢！

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

这是一个演示

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

Answer 2

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

如果您不想让浏览器变得简单，那么

剪辑路径无法设置动画。也就是说，路径必须以某种方式等价。在你的情况下实现这一点的一种方法是将圆变换为非常宽的椭圆。并将圆定义为椭圆，两个半径相等。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您需要更改圈子的剪辑路径。

修改后的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/

虽然建议不使用剪辑路径，但使用简单的高度，宽度和边界半径来定义多边形/形状。

如何从三角形过渡到圆形

3 个答案: