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>
<div class="layer">
<svg class="svg-defs">
<!--100-->
<clipPath id="mask1" class="clippath">
<path class="basicShape" d="M-46.84 -15.85C-52 7.24 -47.42 24.73 -33.09 36.65C4.74 50.05 25.95 53.4 30.54 46.7C37.41 36.65 55.47 32.18 55.47 -12.5C55.47 -42.28 35.98 -53.82 -3 -47.12C-27.07 -49.35 -41.69 -38.93 -46.84 -15.85Z"/>
<path class="endShape" d="M34-38c8.5,7.1,17.4,27.2,17,33c-2,27-13.7,27.2-18,35c-3.7,6.8-10,24-41,21c-11.9-1.2-25-21.9-25-29
C-33,5-52-2.3-55-9c-9-20,28.4-33.1,34-28C0-18,22-48,34-38z"/>
</clipPath>
</svg>
<div class="imageHolder" style="clip-path: url(#mask1);-webkit-clip-path:url(#mask1);"></div>
</div>
<div class="layer">
<svg class="svg-defs">
<!--120-->
<clipPath id="mask2" class="clippath">
<path class="basicShape" d="M40.09 44.91C50.61 34.19 62.01 21.66 61.27 -10.41C60.54 -42.48 23.87 -37.88 11.7 -46.34C-0.47 -54.8 -27.99 -59.18 -52.58 -15.49C-68.97 13.63 -53.24 36.14 -5.39 52.01C17.91 54.42 33.07 52.05 40.09 44.91Z"/>
<path class="endShape" d="M44-28c8.5,7.1,17.4,27.2,17,33c-2,27-13.7,27.2-18,35c-3.7,6.8-10,24-41,21c-11.9-1.2-45.7-17.3-51-22
c-9-8-14-13-14-38c0-53,29-55,52-60C54.7-73.3,32-38,44-28z"/>
</clipPath>
</svg>
<div class="imageHolder" style="clip-path: url(#mask2);-webkit-clip-path:url(#mask2);&qu.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0