如何在不移动图像的情况下实现在背景图像上靠近 1/4 圈的效果？

Question

我有一个带圆角的正方形。我需要为接近图像的圆角设置动画。图像不能移动，因此动画看起来好像圆圈正在“吞下”图像。

HTML：

<div class="container">
  <div class="circle"></div>
</div>

CSS：

.container {
  height: 200px;
  width: 200px;
  border: 1px solid #ccc;
  overflow: hidden;
}

.circle {
  width: 200%;
  height: 200%;
  background-image: url(http://www.planwallpaper.com/static/cache/8a/e0/8ae0d4f7338822ba567adfc22c54f1b6.jpg);
  background-size: 50% 50%;
  background-repeat: no-repeat;
  border-radius: 50%;
  transition: 1s all ease-in-out;
  position: relative;
}

.circle.closed {
  width: 0%;
  height: 0%;
  margin-left: 100%;
  margin-top: 100%;
}

Codepen：https://codepen.io/anon/pen/peLrBG

如您所见，图像随着圆圈缩小。我需要图像没有运动。我怎样才能做到这一点？另外，有没有更好的方法来实现圆角效果的正方形？谢谢。

Answer 1

有一个clip-path CSS 属性可以实现想要的效果。

.circle {
  ...
  clip-path: circle(50% at center);
}

.circle.closed {
  clip-path: circle(0 at center);
}