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-->
    <cli.........完整代码请登录后点击上方下载按钮下载查看

网友评论0