<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>html5制作3D袜子飘动动画</title>
<meta name="keywords" content="3D袜子飘动动画" />
<meta name="description" content="3D袜子飘动动画" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<div id="floor"></div>
<div id="crown"></div>
</div>
<script src='http://www.5iweb.com.cn/statics/js/jquery.1.7.1.min.js'></script>
<script src='js/TweenMax.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
Css部分：
#container{
-webkit-perspective: 1400px;
-webkit-transform-style: preserve-3d;
}
#floor{
position: absolute;
width:1296px;
height:864px;
background: url('http://f.cl.ly/items/2K1J3K2F3P2G2v0P261j/allegiance.jpg') no-repeat;
background-size: 100% 100%;
top:00px;
}
.modal{
position: absolute;
}
#modal1{
width:676px; height:278px; /* retina */
left: 285px;
top:70px;
background-image: url("http://f.cl.ly/items/0l1c460S1S2m3G2P3a2K/sock-mid.png");
background-size: cover;
overflow: visible;
}
#modal1dark{
width:676px; height:278px; /* retina */
left: 50%;
margin-left: -318px;
top:160px;
background-image: url("http://f.cl.ly/items/212H0t2O171y1G3j2E0J/sock-low.png");
background-size: cover;
overflow: visible;
opacity:0;
}
#modal1light{
width:676px; height:278px; /* retina */
left: 50%;
margin-left: -318px;
top:160px;
background-image: url("http://f.cl.ly/items/421Y0q1g391O2n2X2k0p/sock-high.png");
background-size: cover;
overflow: visible;
}
.modalSlice{
z-index: -2;
content:"";
overflow: visible;
position: absolute;
}
.darkSlice{
z-index: -1;
content:"";
overflow: visible;
position: absolute;
opacity:0;
}
.modalMom{
position: absolute;
top:0px;
z-index: 100;
height:300px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html5/h15411.shtml
