svg 之 clip-path 实现图片裁剪
实现svg clip-path 图片裁剪的html 结构，其中clip-path是裁剪的路径， image是要裁剪的图片，preserveAspectRatio为none 表示自动充满容器。效果图：至于裁剪成什么形状是根据你的clip-path 绘制的路径有关css3中也新增了clip-path 属性，可以实现简单裁剪.clip-path {transition: 0.4s cu...
·
实现svg clip-path 图片裁剪的html 结构，其中clip-path是裁剪的路径， image是要裁剪的图片，preserveAspectRatio为none 表示自动充满容器。效果图：
至于裁剪成什么形状是根据你的clip-path 绘制的路径有关
css3中也新增了clip-path 属性，可以实现简单裁剪
.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);
}
<p><img src="mm1.jpg" class="clip-path"></p>
会将图片裁剪成圆形。
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
2
0- 0
已为社区贡献2条内容
所有评论(0)