gsap+three实现图片悬浮涟漪波纹过渡动画效果代码-html代码-BFW代码库

gsap+three实现图片悬浮涟漪波纹过渡动画效果代码

代码语言：html

所属分类：悬停

代码描述：gsap+three实现图片悬浮涟漪波纹过渡动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
<style>
body{
  background:#4F4F4F;
  color:white;
  font-family: 'Oswald', sans-serif;
  display:flex;
  justify-content:center;
  padding-top:40px;
}

h1{
  font-size:60px;
}

h3{
  font-weight:400;
  color:#FFFFFF;
}

h1,
h3{
  margin:0;
  padding:0;
}

img{
  width:42px;
  height:39px;
  margin:0px 20px;
}

.ticket{
    position:relative;
    height:410px;
    width:690px;
    background-size: cover;
    background-position: center;
    display:flex;
    align-items:flex-end;
    box-shadow: 0px 10px 40px rgba(0,0,0,.4);
}


.overlay{
  position:absolute;
  background:rgba(0, 0, 0, .2);
  left:0; 
  right:0;
  top:0;
  bottom:0;
  z-index:2;
}

.flight-info{
  position:relative;
  z-index:3;
  padding:30px;
}

canvas{
  position:absolute;
  border-radius:6px;
  z-index:1;
}
</style>

  
  
  
</head>

<body >
  <div class="ticket" style="background-image: url('')">
<div class="ticket" id="hoverTarget">
    <div class="overlay"></div>
    <div class="flight-info">
        <h3>October 30 2023 12:35AM</h3>
        <div class="flight-locations">
            <h1>CPT</h1>
            <img src="//repo.bfw.wiki/bfwrepo/icon/6083e090409bf.png" />
            <h1>JHB</h1>
        </div>
    </div>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.8.0.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.128.js"></script>
      <script >
var vertex = `
    varying vec2 vUv;
    void main() {
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
    }
`;
var fragment = `
    varying vec2 vUv;
    uniform sampler2D texture1;
    uniform sampler2D texture2;
    uniform sampler2D disp;
    uniform float dispFactor;
    uniform float intensity1;
    uniform float intensity2;
    uniform float angle1;
    uniform float angle2;

    vec2 rotate(vec2 v, float a) {
        float s = sin(a);
        float c = cos(a);
        mat2 m = mat2(c, -s, s, c);
        return m * v;
    }

    void main() {
      .........完整代码请登录后点击上方下载按钮下载查看