css图片悬停遮罩动画效果-html代码-BFW代码库

css图片悬停遮罩动画效果

代码语言：html

所属分类：悬停

代码描述：css图片悬停遮罩动画效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
.wrapper {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  min-height: 100vh;
  background-color: #E1E6EC;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.img {
  max-width: 500px;
  width: 100%;
  position: absolute;
}
.img.-base {
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.07), 0 6.7px 5.3px rgba(0, 0, 0, 0.05), 0 12.5px 10px rgba(0, 0, 0, 0.042), 0 22.3px 17.9px rgba(0, 0, 0, 0.035), 0 41.8px 33.4px rgba(0, 0, 0, 0.028), 0 100px 80px rgba(0, 0, 0, 0.02);
}
.img.-clip {
  -webkit-clip-path: url(#clip-path);
          clip-path: url(#clip-path);
  pointer-events: none;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
  opacity: 0;
}
</style>

</head>
<body translate="no">
<div class="wrapper">
<img class="img -base" src="http://repo.bfw.wiki/bfwrepo/image/5e9f92b880a15.png" alt="">
<img class="img -clip" src="http://repo.bfw.wiki/bfwrepo/image/5e9f92bedb066.png" alt="" />
<svg id="svg" viewbox="0 0 500 500" width="1%">
<clipPath class="clip-path" id="clip-path" width="30" height="30">
<path d="M189,94.5c0,23.1-10,52.1-23.7,68.6c-17.3,20.7-41.7,25.9-70.8,25.9c-25.9,0-58.9-14.3-76-31.1C1.2,140.7,0,120.8,0,94.5c0-23.6,15.3-47.4,29.6-63.9C46.9,10.5,65.9,0,94.5,0c22.2,0,48.7,8,64.9,20.8C181.2,38.1,189,64.5,189,94.5z"></path>
</clipPath>
</svg>
</div>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/snap.svg-min.js"></script>
<script>
const svgPath .........完整代码请登录后点击上方下载按钮下载查看