jquery+TweenMax实现炫酷三维空间幻灯片围成一圈旋转动画效果代码-html代码-BFW代码库

jquery+TweenMax实现炫酷三维空间幻灯片围成一圈旋转动画效果代码

代码语言：html

所属分类：幻灯片

代码描述：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:preserve-3d;
                transform: translate3d(0, 0, 0);

                /*-webkit-backface-visibility: hidden;
                -moz-backface-visibility: hidden;
                -ms-backface-visibility:hidden;
                backface-visibility:hidden;*/
        }
        
        #contentContainer
        {
                position:absolute;
                margin-left:-500px;
                margin-top:-500px;
                left:50%;
                top:50%;
                width:1000px;
                height:1000px;
        }
        
        #carouselContainer
        {
                position:absolute;
                margin-left:-500px;
                margin-top:-500px;
                left:50%;
                top:50%;
                width:1000px;
                height:1000px;
        }
        
        .carouselItem
        {
                width:320px;
                height:130px;
                position:absolute;
                left:50%;
                top:50%;
                margin-left:-160px;
                margin-top:-90px;
                visibility:hidden;
        }
        
        .carouselItemInner
        {
                width:320px;
                height:130px;
                position:absolute;
                background-color:rgba(255, 255, 255, .75);
                border:10px solid rgba(255, 255, 255, .5);
                color:aqua;
                font-size:72px;
                left:50%;
                top:50%;
                margin-left:-160px;
                margin-top:-90px;
                text-align:center;
                padding-top:50px;
                
        }
</style>

</head>

<body>
  <header>
                <h1>3D Carousel Using TweenMax.js & jQuery</h1>
                <h3>A pen by <a href="h" target="_blank">@johnblazek</a></h3>
                <div id="fps">Framerate: 0/60 FPS</div>
        </header>
        
        <div id="contentContainer" class=".........完整代码请登录后点击上方下载按钮下载查看