【CSS】CSS clip-path从方形到圆形动画效果示意实例

admin

SVG代码：
.clip-path {
    transition: 0.4s cubic-bezier(1, -1, 0, 2);
    -webkit-clip-path: circle(180px at 128px 95px);
    clip-path: circle(180px at 128px 95px);
}
.clip-path:hover {
    -webkit-clip-path: circle(95px at 128px 95px);
    clip-path: circle(95px at 128px 95px);
}
SVG代码：
<strong>鼠标hover:</strong>
<p><img src="mm1.jpg" class="clip-path"></p>

理解：circle(半径 at x 座标 y座标)

admin

http://www.w3cplus.com/css3/using-making-sense-of-clip-path.html