3D时钟特效免费下载

每秒更新时会带有扑克翻牌特效,360度翻转,效果非常棒,因为用css3的缘故,所以网友们在浏览的时间请不要用IE浏览器来运行,为了让网友们看到最终效果请使用谷歌、火狐等浏览打开运行。

CSS样式

#shadow { 
    position:absolute; 
    left:0; 
    right:0; 
    top:0; 
    bottom:0; 
    z-index:-1; 
     
    background:-webkit-radial-gradient(center center , 50% 50%, #666, #232323 ); 
    background:-moz-radial-gradient(center center , 150px 50px, #cfcfcf, #232323 ); 
    background:-ms-radial-gradient(center center , 150px 50px, #cfcfcf, #232323 ); 
    background:-o-radial-gradient(center center , 150px 50px, #cfcfcf, #232323 ); 
    background:radial-gradient(center center , 150px 50px, #cfcfcf, #232323 ); 
    -webkit-transform:perspective(1000px) rotateX(0deg) rotateY(0deg); 
    -moz-transform:perspective(1000px) rotateX(0deg) rotateY(0deg); 
    -ms-transform:perspective(1000px) rotateX(0deg) rotateY(0deg); 
    -o-transform:perspective(1000px) rotateX(0deg) rotateY(0deg); 
    transform:perspective(1000px) rotateX(0deg) rotateY(0deg); 
} 
 
#demo1 {  
    width: 1000px; 
    margin:0 auto; 
    margin-top:15%; 
    height:150px; 
     
    -webkit-transform-style:preserve-3d; 
    -moz-transform-style:preserve-3d; 
    -ms-transform-style:preserve-3d; 
    -o-transform-style:preserve-3d; 
    transform-style:preserve-3d; 
} 
 
#demo1 dd,#demo1 dt {  
    border:1px solid #fafafa; 
    box-shadow:2px 2px 4px #000; 
    text-align:center; 
    float:left; 
    height:150px; 
    margin-left:13px; 
    position:relative; 
    border-radius:10px; 
    font-size:110px; 
    font-family:"微软雅黑", "Microsoft Sans Serif", Arial; 
     
    background:-webkit-linear-gradient( top, #fafafa 0%, #dcdcdc 100% ); 
    background:-moz-linear-gradient( top, #fafafa 0%, #dcdcdc 100% ); 
    background:-ms-linear-gradient( top, #fafafa 0%, #dcdcdc 100% ); 
    background:-o-linear-gradient( top, #fafafa 0%, #dcdcdc 100% ); 
    background:linear-gradient( top, #fafafa 0%, #dcdcdc 100% ); 
} 
 
#demo1 dd { 
    width: 120px;  
    line-height:150px;  
     
    -webkit-transform-style:preserve-3d; 
    -moz-transform-style:preserve-3d; 
    -ms-transform-style:preserve-3d; 
    -o-transform-style:preserve-3d; 
    transform-style:preserve-3d; 
}

Aui-core核心代码

Aui.ready( function() 
{ 
    if( /ie/g.test( Aui.browser() ) ) 
    { 
        Aui("body").html("Adam CSS 3.0 effect,支持非IE浏览器。你懂的!") 
                   .setStyle( 
                   { 
                       "color" : "#fff", 
                       "text-align" : "center", 
                    "font-size" : "50px", 
                    "font-weight" : "bolder", 
                    "line-height" : "500px" 
                   }); 
    } 
    else 
    { 
        adam("demo1").init( 500, "move", "modeY" ); 
    }; 
 
});
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录