首先非常感谢网友Adam‘的无私分享，此js特效是他用自己写的一个JS框架Aui-core+css3实现的，这款仿安卓时钟带有3D特效，每秒更新时会带有扑克翻牌特效，360度翻转，效果非常棒，因为用css3的缘故，所以网友们在浏览的时间请不要用IE浏览器来运行，为了让网友们看到最终效果请使用谷歌、火狐等浏览打开运行。
CSS3样式代码如下：
#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;
}
#demo1 dd div,#demo1 dt div {
position:absolute;
left:0;
top:160px;
height:60px; /* height:150px; */
width:120px;
border-radius:10px;
opacity:.3;
-webkit-transform:rotateX(180deg);
-moz-transform:rotateX(180deg);
-ms-transform:rotateX(180deg);
-o-transform:rotateX(180deg);
transform:rotateX(180deg);
background:-webkit-linear-gradient( top, rgba( 35,35,35,0 ) 0%, rgba( 220,220,220,.6 ) 100% );
background:-moz-linear-gradient( top, rgba( 35,35,35,0 ) 0%, rgba( 220,220,220,.6 ) 100% );
background:-ms-linear-gradient( top, rgba( 35,35,35,0 ) 0%, rgba( 220,220,220,.6 ) 100% );
background:-o-linear-gradient( top, rgba( 35,35,35,0 ) 0%, rgba( 220,220,220,.6 ) 100% );
background:linear-gradient( top, rgba( 35,35,35,0 ) 0%, rgba( 220,220,220,.6 ) 100% );
color:transparent;
/*-webkit-background-clip: text;
-moz-background-clip: text;
-ms-background-clip: text;
-o-background-clip: text;
background-clip: text;*/
}
#demo1 dt div {
width:80px;
}
#demo1 dt {
line-height:125px;
width:80px;
}
.move {
-webkit-transition:all 400ms ease;
-moz-transition:all 400ms ease;
-ms-transition:all 400ms ease;
-o-transition:all 400ms ease;
transition:all 400ms ease;
}
.modeX {
-webkit-transform:rotateX(360deg);
-moz-transform:rotateX(360deg);
-ms-transform:rotateX(360deg);
-o-transform:rotateX(360deg);
transform:rotateX(360deg);
}
.modeY {
-webkit-transform:rotateY(360deg);
-moz-transform:rotateY(360deg);
-ms-transform:rotateY(360deg);
-o-transform:rotateY(360deg);
transform:rotateY(360deg);
}
Aui-core核心代码如下：
init: function(speed, mode, move) {
speed = speed || 100;
mode = mode || "modeY";
move = move || "move";
var _this = this;
Aui("body").append("<dl id=" + _this.id +"><dd><span>0</span><div></div></dd><dd><span>0</span><div></div></dd><dt><span>:</span><div></div></dt><dd><span>0</span><div></div></dd><dd><span>0</span><div></div></dd><dt><span>:</span><div></div></dt><dd><span>0</span><div></div></dd><dd><span>0</span><div></div></dd></dl>");
var oDD = Aui("#" + _this.id).find("dd");
_this.timer = setInterval(function() {
var t = _this._getTime(new Date()),i;
for (i = 5; i >= 0; i -= 1) {
var thisDD = oDD.eq(i);
if (thisDD.find("span").text() == t[i] && _this.def) break;
console.log(thisDD) thisDD.addClass(move + " " + mode).find("span").text(t[i]); //.next().text( t[ i ] )
(function(o) {
setTimeout(function() {
o.removeClass(move + " " + mode);
},
speed + 10);
})(thisDD)
};
_this.def = true;
},
1000);
return this;
}
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
Aui-core 360度旋转 3D特效 css3 图片3D旋转 js特效 时间插件 时间特效