gsap实现马路骑自行车鼠标移动视觉差异效果代码-html代码-BFW代码库

gsap实现马路骑自行车鼠标移动视觉差异效果代码

代码语言：html

代码描述：gsap实现马路骑自行车鼠标移动视觉差异效果代码，左右上下移动鼠标，可以感受第一视觉效果，身临其境。

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


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

<head>

  <meta charset="UTF-8">
  <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">

  

  
<style>
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.sprite {
  background-image: url(//repo.bfw.wiki/bfwrepo/images/yaoqing/handlebarSS.png);
  background-repeat: no-repeat;
  position: absolute;
}

.cableL {
  left: 425px;
  top: 220px;
  width: 44px;
  height: 140px;
  background-position: -2px -2px;
}

.cableR {
  left: 523px;
  top: 142px;
  width: 66px;
  height: 278px;
  background-position: -50px -2px;
}

.displayBg {
  left: 391px;
  top: 85px;
  width: 220px;
  height: 52px;
  background-position: -120px -2px;
}

.displayFg {
  left: 423px;
  top: 7px;
  width: 156px;
  height: 171px;
  background-position: -344px -2px;
}

.left1 {
  left: 118px;
  top: 87px;
  width: 345px;
  height: 105px;
  background-position: -120px -177px;
}

.left2 {
  left: 55px;
  top: 16px;
  width: 145px;
  height: 395px;
  background-position: -504px -2px;
}

.lowerbar {
  left: 438px;
  top: 292px;
  width: 123px;
  height: 208px;
  background-position: -2px -401px;
}

.right1 {
  left: 534px;
  top: 81px;
  width: 344px;
  height: 107px;
  background-position: -2px -286px;
}

.right2 {
  left: 796px;
  top: 12px;
  width: 160px;
  height: 391px;
  background-position: -129px -401px;
}

.stem {
  left: 446px;
  top: 123px;
  width: 103px;
  height: 210px;
  background-position: -293px -401px;
}

.topbar {
  left: 438px;
  top: 307px;
  width: 123px;
  height: 193px;
  background-position: -400px -401px;
}
</style>



</head>

<body  >
  <div class="scene" style="opacity:0">
  <div class="bg"></div>
  <div class="bike">
    <div class="cables">
      <div class="sprite cableL"></div>
      <div class="sprite cableR"></div>
    </div>
    <div class="sprite lowerbar"></div>
    <div class="handles">
      <div class="sprite displayBg"></div>
      <div class="sprite displayFg"></div>
      <div class="sprite left2"></div>
      <div class="sprite left1"></div>
      <div class="sprite right2"></div>
      <div class="sprite right1"></div>
    </div>
    <div class="sprite stem"></div>
    <div class="sprite topbar"></div>
  </div>
</div>

<script type=&qu.........完整代码请登录后点击上方下载按钮下载查看