svg+css实现曲线连接照片遮罩效果代码-html代码-BFW代码库

svg+css实现曲线连接照片遮罩效果代码

代码语言：html

代码描述：svg+css实现曲线连接照片遮罩效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato:400,100,300'>
  
<style>
/* .clippy {
  transition: fill 1.2s ease-in-out;
} */
.clippy {
  fill: blue;
}

/* .rainbow {
  animation:
} */

h1 {
  font-family: "Proxima-Nova", sans-serif;
  font-weight: 700;
  font-size: 60px;
}
* {
  font-family: "Proxima-Nova", sans-serif;
}
a {
  color: #116daa;
  font-weight: 600;
}
</style>


</head>

<body>
  <div style="display: flex; flex-direction: row; max-width: 1440px; flex-wrap: wrap; margin: 0 auto;">
  <svg width="608" height="551" viewBox="0 0 608 551" fill="none" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <style>
        .clippy {
          clip-path: polygon(0% 0%, 0% 100%, 44% 100%, 44% 4%, 63% 4%, 63% 20%, 44% 20%, 29% 100%, 100% 100%, 100% 0%);
          transition: fill 1.2s ease-in-out;
        }
      </style>
    </defs>
    <image href="//repo.bfw.wiki/bfwrepo/image/5d653bd0990d0.png" width="210.249" height="210.249" transform="matrix(-1 0 0 1 549.098 75.5815)" />
    <image href="//repo.bfw.wiki/bfwrepo/image/629fe9ae4c888.png" x="7.28711" y="22.5186" width="345.41" height="461.547" />
    <path class="clippy" fill-rule="evenodd" d="M52.5096 350.457L51.7893 357.42L52.5096 350.457ZM160.638 281.375L167.597 282.133L160.638 281.375ZM157.634 236.822L150.856 238.57L157.634 236.822ZM123.093 167.74L117.05 171.273L123.093 167.74ZM113.081 78.1341L106.676 75.3107L106.676 75.3107L113.081 78.1341ZM166.645 18.5635L163.283 12.4238L163.283 12.4238L166.645 18.5635ZM334.344 54.5064L328.899 58.9057L328.899 58.9057L334.344 54.5064ZM352.865 173.648L359.319 176.36L359.319 176.36L352.865 173.648ZM261.757 267.759L266.221 273.151L261.757 267.759ZM190.53 355.544L184.4 352.164L184.4 352.164L190.53 355.544ZM177.172 430.876L184.146 430.273L177.172 430.876ZM225.411 516.721L229.944 511.387L229.944 511.387L225.411 516.721ZM322.83 540.583L321.133 533.792L322.83 540.583ZM4.........完整代码请登录后点击上方下载按钮下载查看