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">
  <svg class="svg-defs">
    <!--60-->
    <clipPath id="mask" class="clippath">
      <path class="basicShape" d="M-30.36 -11.39C-36.2 1.02 -23.8 6.86 -9.93 21.46C-0.68 31.19 12.46 30.22 29.49 18.54C36.3 10.27 38.73 0.29 36.79 -11.39C34.84 -23.07 24.2 -28.91 4.85 -28.91C-14.73 -25.5 -26.47 -19.66 -30.36 -11.39Z"/>
      <path class="endShape" d="M4-33c9.5,13.8,30,10.5,32,16C42-1,25.3-1.8,21,6c-3.7,6.8-8.6,22.1-17,24C-23.2,36.1-37,2-29-8
	c3.9-4.9,17-1.5,21-8C-3.2-23.7-5-46,4-33z"/>
    </clipPath>
  </svg>
  <div class="imageHolder" style="clip-path: url(#mask);-webkit-clip-path:url(#mask);"></div>
</div>
<div class="layer">
  <svg class="svg-defs">
    <!--80-->
    <clipPath id="mask0" class="clippath">
      <path class="basicShape" d="M-25.26 -29.14C-42.04 -20.38 -36.2 -0.67 -36.2 11.74C-36.2 24.15 -12.85 27.8 1.23 37.29C15.3 46.78 30.22 27.8 39.71 22.69C49.2 17.58 47.74 4.44 44.09 -18.19C41.65 -33.27 28.05 -40.09 3.29 -38.63C-4.55 -38.14 -14.06 -34.98 -25.26 -29.14Z"/>
      <path class="endShape" d="M23-26c-1,11,14,8.5,16,14C45,4,20.3,8.2,16,16c-3.7,6.8-4.6,23.1-13,25c-11.7,2.6-21-17.9-21-25
	C-18-1-38,3.7-41-3c-9-20,24.9-28.3,30-34C6-56,24.4-41.7,23-26z"/>
    </clipPath>
  </svg>
  <div class="imageHolder" style="clip-path: url(#mask0);-webkit-clip-path:url(#mask0);"></div>
</div>
&.........完整代码请登录后点击上方下载按钮下载查看