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.583ZM403.331 495.298L407.777 500.704L407.777 500.704L403.331 495.298ZM493.368 245.733L500.236 247.086L493.368 245.733ZM554.26 139.141L559.415 134.406L549.944 124.095L544.789 128.83L554.26 139.141ZM8.3691 336.759C4.56044 336.096 0.935155 338.646 0.27179 342.454C-0.391576 346.263 2.15818 349.888 5.96684 350.552L8.3691 336.759ZM51.7893 357.42C77.7828 360.109 104.951 355.29 126.559 342.865C148.315 330.354 164.562 309.998 167.597 282.133L153.679 280.617C151.207 303.313 138.138 320.057 119.58 330.728C100.875 341.484 76.7325 345.926 53.2299 343.494L51.7893 357.42ZM167.597 282.133C168.674 272.24 169.106 264.995 168.611 257.863C168.115 250.715 166.706 243.97 164.412 235.074L150.856 238.57C153.08 247.196 154.237 252.966 154.645 258.833C155.053 264.717 154.728 270.987 153.679 280.617L167.597 282.133ZM164.412 235.074C158.682 212.854 147.882 196.272 129.136 164.208L117.05 171.273C136.35 204.286 145.742 218.741 150.856 238.57L164.412 235.074ZM129.136 164.208C124.879 156.926 119.415 142.609 116.615 126.52C113.801 110.349 113.899 93.634 119.487 80.9576L106.676 75.3107C99.4654 91.6688 99.8109 111.617 102.822 128.92C105.848 146.306 111.79 162.275 117.05 171.273L129.136 164.208ZM119.487 80.9576C129.6.........完整代码请登录后点击上方下载按钮下载查看