基于Aui-core+CSS3的3D时钟旋转切换js特效_日期时间_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

基于Aui-core+CSS3的3D时钟旋转切换js特效

来源：我爱模板网作者：大小：大小： 0KB 点击次数：发布时间：2021-05-24 22:27:30 去下载去预览

特效介绍

这是一款基于Aui-core+CSS3的带有倒影的3D时钟旋转切换js特效，非常大气，时间切换时，当前数字会沿着中心旋转90°，切换到下一个数字。没有用到一张图片，纯css和js实现。放在个人博客上做个小时钟还是非常个性的。

使用方法

运行下面的代码，可以查看效果。复制下面的代码到您的项目中，适当修改css，即可使用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>基于Aui-core+CSS3的3D时钟旋转切换js特效</title> <style> * { margin:0; padding:0; list-style:none; } body { background:#232323; overflow:hidden; } #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; } #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); } </style>  <script src="http://www.5imoban.net/download/Aui-core/aui-core-1.42.min.js" language="javascript" type="text/javascript"></script> <script language="javascript" type="text/javascript"> ( function( w ) { w.adam = function( id ) { return new adamClock( id ); }; var adamClock = function( id ) { this.id = id; this.def = false; this.timer = null; }; adamClock.prototype = { _getTime : function( o ) { var h = this._toString( o.getHours() ), m = this._toString( o.getMinutes() ), s = this._toString( o.getSeconds() ); return [ h.charAt( 0 ), h.charAt( 1 ), m.charAt( 0 ), m.charAt( 1 ), s.charAt( 0 ), s.charAt( 1 ) ]; }, _toString : function( num ) { return ( num > 9 ? num : "0" + num ).toString(); }, 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; } }; })( window ); 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" ); }; }); </script> </head> <body> </body> </html>
提示：您可以先修改部分代码再运行