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

代码语言:html

所属分类:视觉差异

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

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

网友评论0