！声明文档类型

超文本标记语言

头

meta charset='UTF-8 '

titlehtml5制作三维(三维的缩写)袜子飘动动画/title

元名称='关键词'内容='3D袜子飘动动画' /

元名称='描述'内容='3D袜子飘动动画' /

链接rel='样式表href='css/style.css '

/head

身体

div id='container '

div id='floor'/div

div id='crown'/div

/div

脚本src=' http://www .5 iweb。com。cn/statics/js/jquery。1 .7 .1 .量滴js '/脚本

脚本src=' js/tweenmax。量滴js '/脚本

脚本src=' js/index。js '/脚本

/body

/html

钢性铸铁部分：

#容器{

-web工具包-透视图： 1400 px

-web kit-transform-style : preserve-3d；

}

#floor{

位置：

宽度宽度：1296像素

高度：864px

背景： URL(' http://f . cl。ly/items/2k 1j 3k 2f 3p 2 g2v 0p 261j/忠诚。jpg ')无重复；

背景尺寸： ;

top:00px

}。modal{

位置：

}

#modal1{

宽度宽度：676 pxh重量：278px/*视网膜*/

left: 285px

top:70px

背景图片： URL(' http://f . cl。ly/items/0lc 460s 1s 2 m3 g2p 3a 2k/sock-mid。png ')；

背景尺寸：封面；

飞越：可见；

}

#modal1dark{

宽度宽度：676 pxh重量：278px/*视网膜*/

左侧： 50%;

左边距：-318像素；

top:160px

背景图片： URL(' http://f . cl。ly/items/212 h0t 2 o 171 y1 g3j 2e 0j/sock-low。png ')；

背景尺寸：封面；

飞越：可见；

opacity:0

}

#modal1light{

宽度宽度：676 pxh重量：278px/*视网膜*/

左侧： 50%;

左边距：-318像素；

top:160px

背景图片： URL(' http://f . cl。ly/items/421 y0q 1g 3912 N2 x2k 0p/袜子-高。png ')；

背景尺寸：封面；

飞越：可见；

}。modalSlice{

z-索引：-2;

内容： " "；

飞越：可见；

位置：

}。darkSlice{

z-索引：-1;

内容： " "；

飞越：可见；

位置：

opacity:0

}。modalMom {

位置：

top:0px

z指数： 100；

高度：300像素

-web kit-transform-style : preserve-3d；

-moz-transform-style : preserve-3d；

}