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