jquery+TweenMax实现炫酷三维空间幻灯片围成一圈旋转动画效果代码
代码语言:html
所属分类:幻灯片
代码描述:jquery+TweenMax实现炫酷三维空间幻灯片围成一圈旋转动画效果代码
代码标签: jquery TweenMax 炫酷 三维 空间 幻灯片 围成 圈 旋转 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
html, body{ background-color:#1a948d; }
body
{
background-image: url('../images/background.jpg');
background-repeat: no-repeat;
background-position: top center;
width:100%;
background-size:cover;
height:100%;
min-height:1000px;
overflow:hidden;
font-family: 'quicksandlight', Helvetica, Arial;
color:#FFFFFF;
text-shadow: -1px -1px 4px rgba(0, 0, 0, .35);
filter: dropshadow(color=#000000, offx=1, offy=1);
}
header
{
margin-top:30px;
position:absolute;
z-index:5;
width:420px;
padding-top:10px;
padding-bottom:10px;
}
h1{
font-size:36px;
letter-spacing:-2.5px;
margin-left:30px;
}
h3{
font-size:16px;
letter-spacing:-1.5px;
margin-top:5px;
margin-left:35px;
}
#fps
{
margin-top:5px;
margin-left:35px;
}
a
{
color:rgba( 255, 255, 255, .65 );
text-decoration: none;
}
a:hover
{
color:rgba( 255, 255, 255, 1 );
}
/* hardware accelatator class */
.trans3d
{
-webkit-transform-style: preserve-3d;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform-style: preserve-3d;
-moz-transform: translate3d(0, 0, 0);
-ms-transform-style:preserve-3d;
-ms-transform: translate3d(0, 0, 0);
transform-style:pre.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0