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>.........完整代码请登录后点击上方下载按钮下载查看