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>
&.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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