TweenMax实现蓝天绿草相对移动动画效果代码-html代码-BFW代码库

TweenMax实现蓝天绿草相对移动动画效果代码

代码语言：html

所属分类：动画

代码描述：TweenMax实现蓝天绿草相对移动动画效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
<style>
html {
  height:100%;
  background:#63D0FF;
}

body{
  margin:0;
  padding:0;
  background:#63D0FF;
  height:100%;
}

#wrapper {
  position:relative;
  width:100%;
  height:100%;
}

#clouds{
  background:url("//repo.bfw.wiki/bfwrepo/image/6087db8feb4ee.png") repeat-x 0 bottom #ACE6FF;
  width:100%;
  height:230px; /*190px*/
  min-height:230px;
  position:absolute;
  top:0;
  left:0;
  z-index:1;
  -webkit-transform:translate3d(0,0,0.01);
  transform:translate3d(0,0,0.01);
}

#ground {
  background:url("//repo.bfw.wiki/bfwrepo/image/6087dbac25a90.png") repeat-x 0 0 transparent;    
  position: absolute;
  bottom: 0;
  left: 0;
  z-index:2;
  width: 100%;
  height: 192px;
  min-height:192px;
  border:0 none transparent;
  outline:0 none transparent;
  -webkit-transform:translate3d(0,0,0.01);
  transform:translate3d(0,0,0.01);
  will-change: transform;
}
</style>




</head>

<body>
  <div id="wrapper">
  <div id="clouds"></div>
  <div id="ground"></div>
</div>
.........完整代码请登录后点击上方下载按钮下载查看