TweenMax实现图片水滴放大镜效果代码-html代码-BFW代码库

TweenMax实现图片水滴放大镜效果代码

代码语言：html

代码描述：TweenMax实现图片水滴放大镜效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body{
  overflow: hidden;
}

.endShape{
  display: none;
}

.layer{
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  bottom:0;
  right:0;
}

.imageHolder{
  position: relative;  
  width:100%;
  height:100vh;
  background-image:url('//repo.bfw.wiki/bfwrepo/image/5fe5766864396.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_800,h_600,/quality,q_90');
  background-size:cover; 
  transform-origin: center center;
  -webkit-transform-origin: center center;
}

.svg-defs {
    position: absolute;    
}
</style>



</head>

<body>
  <div class="imageHolder" style="position:absolute;"></div>



<div class="layer">
  <svg class="svg-defs">
    <!--40-->
    <clipPath id="mask00" class="clippath">
      <path class="basicShape" d="M-13.58 4.1C-9.2 12.3 6.86 15.62 17.08 15.62C27.3 15.62 27.3 6.86 30.22 -7.74C32.17 -17.47 25.11 -22.58 9.05 -23.07C-8.95 -10.41 -16.5 -1.36 -13.58 4.1Z"/>
      <path class="endShape" d="M1-19c16.8,0,15.2,5.5,17,11c3,9,4,24-14,28C-23.2,26.1-27,6-19-4C-10.3-14.8-16-19,1-19z"/>
    </clipPath>
  </svg>
  <div class="imageHolder" style="clip-path: url(#mask00);-webkit-clip-path:url(#mask00);"></div>
</div>

<div class="layer">
  <s.........完整代码请登录后点击上方下载按钮下载查看