记录通过css3裁剪图片

裁剪图片,我们一般是通过ps来达到,但是,目前的科技发展如此之快,我们不得不进步,通过css就能裁剪图片了,主要用到“clip-path”具体操作如下:

首先连接下clip-path 这是MDN中的详细介绍,今天我们要讲的是同过url来外链svg通道达到随意变换形状,可以在线生成svg 查看源文件来保存到本地,或是想要的地方,再到想要裁剪的地方通过clip-path:url(xx.svg#id)这种方式来达到裁剪,我这项目在vue中外联svg文件没有效果,只有放在当前文件中直接是clip-path:url(#id)才有效果,应该是打包时出问题了,以下代码

.heart {
  display: flex;
  justify-content: center;
  width: 120px;
  height: 103px;
  margin: auto;
  clip-path: url("#svgPath");
  background-image: url("./../../../public/static/we.jpg");
  background-size: 88%;
  background-position: 80%;
  transform: scale(0.95);
}
.jump {
  animation: jump alternate 3s infinite;
}
@keyframes jump {
  from {
    transform: scale(0.95);
  }
  to {
    transform: scale(1);
  }
}

svg:
以下是一个❤形状的pth
<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
<defs>
<clip-Path id="svgPath">
<path d="m59.75001,25.29041c24.32542,-60.24634 119.63322,0 0,77.45958c-119.63322,-77.45958 -24.32542,-137.70592 0,-77.45958z"/>
</clip-Path>
</defs>
</svg>


html代码块:
<div class='h_l h_b'></div>
<div class="heart":class='jump'>
</div>
效果:
记录通过css3裁剪图片

 

 

 

百度未收录
分享