超酷jQuery+CSS3翻页时钟动画特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是超酷jQuery+CSS3翻页时钟动画特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>超酷jQuery+CSS3翻页时钟动画</title>
  <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>

<body>
<main>
  <div style="display:none">
    <div id="top-test-anim" class="num-anim top-anim" style="display:none;">
      <div class="top-half-num">2</div>
    </div>
    <div id="bottom-test-anim" class="num-anim bottom-anim" style="display:none;">
      <div class="bottom-half-num">
        <div class="dropper">3</div></div>
    </div>
  </div>
  <canvas id="my-canvas"></canvas>
  <div id="clock">
    <div class="time-container hours">
      <div class="digit">
        <div class="fade">&nbsp;</div>
        <span class="num top" id="hour-tens-top">1</span>
        <span class="num bottom" id="hour-tens-bottom">
          <div class="bottom-container">1</div></span>
          <div class="swapper">
            <div id="top-hour-tens-anim" class="num-anim top-anim" style="display:none;">
              <div class="top-half-num">8</div>
            </div>
            <div id="bottom-hour-tens-anim" class="num-anim bottom-anim" style="display:none;">
              <div class="bottom-half-num">
                <div class="dropper">9</div></div>
            </div>
        </div>
        <div class="ring ring-left"></div>
        <div class="ring ring-right"></div>
      </div>
      <div class="digit">
        <div class="fade">&nbsp;</div>
        <span class="num top" id="hour-ones-top">3</span>
        <span class="num bottom" id="hour-ones-bottom">
          <div class="bottom-container">3</div></span>
          <div class="swapper">
            <div id="top-hour-ones-anim" class="num-anim top-anim" style="display:none;">
              <div class="top-half-num">8</div>
            </div>
            <div id="bottom-hour-ones-anim" class="num-anim bottom-anim" style="display:none;">
              <div class="bottom-half-num">
                <div class="dropper">9</div></div>
            </div>
        </div>
        <div class="ring ring-left"></div>
        <div class="ring ring-right"></div>
      </div>
    </div>
    <div class="time-container minutes">
      <div class="digit">
        <div class="fade">&nbsp;</div>
        <span class="num top" id="minute-tens-top">4</span>
        <span class="num bottom" id="minute-tens-bottom">
          <div class="bottom-container">4</div></span>
          <div class="swapper">
            <div id="top-minute-tens-anim" class="num-anim top-anim" style="display:none;">
              <div class="top-half-num">8</div>
            </div>
            <div id="bottom-minute-tens-anim" class="num-anim bottom-anim" style="display:none;">
              <div class="bottom-half-num">
                <div class="dropper">9</div></div>
            </div>
        </div>
        <div class="ring ring-left"></div>
        <div class="ring ring-right"></div>
      </div>
      <div class="digit">
        <div class="fade">&nbsp;</div>
        <span class="num top" id="minute-ones-top">3</span>
        <span class="num bottom" id="minute-ones-bottom">
          <div class="bottom-container">3</div></span>
          <div class="swapper">
            <div id="top-minute-ones-anim" class="num-anim top-anim" style="display:none;">
              <div class="top-half-num">8</div>
            </div>
            <div id="bottom-minute-ones-anim" class="num-anim bottom-anim" style="display:none;">
              <div class="bottom-half-num">
                <div class="dropper">9</div></div>
            </div>
        </div>
        <div class="ring ring-left"></div>
        <div class="ring ring-right"></div>
      </div>
    </div>
    <div class="time-container seconds">
      <div class="digit">
        <div class="fade">&nbsp;</div>
        <span class="num top" id="second-tens-top">5</span>
        <span class="num bottom" id="second-tens-bottom">
          <div class="bottom-container">5</div></span>
          <div class="swapper">
            <div id="top-second-tens-anim" class="num-anim top-anim" style="display:none;">
              <div class="top-half-num">8</div>
            </div>
            <div id="bottom-second-tens-anim" class="num-anim bottom-anim" style="display:none;">
              <div class="bottom-half-num">
                <div class="dropper">9</div></div>
            </div>
        </div>
        <div class="ring ring-left"></div>
        <div class="ring ring-right"></div>
      </div>
      <div class="digit">
        <div class="fade">&nbsp;</div>
        <span class="num top" id="second-ones-top">3</span>
        <span class="num bottom" id="second-ones-bottom">
          <div class="bottom-container">2</div></span>
          <div class="swapper">
            <div id="top-second-ones-anim" class="num-anim top-anim" style="display:none;">
              <div class="top-half-num">2</div>
            </div>
            <div id="bottom-second-ones-anim" class="num-anim bottom-anim" style="display:none;">
              <div class="bottom-half-num">
                <div class="dropper">3</div></div>
            </div>
        </div>
        <div class="ring ring-left"></div>
        <div class="ring ring-right"></div>
      </div>
    </div>
  </div>
</main>
<script src='js/jquery.js'></script>
<script src="js/index.js"></script>
</body>
</html>

JS代码(index.js):

var CHANCE_SPEC,x,y;
	CHANCE_SPEC = 60;
	x = 0;
	y = 0;
	function rand(min,max){
	return Math.floor(Math.random() * (max - min + 1) - min);
}
function drawSpec(data,x,y,w){
	var index;
	index = (x + y * w) * 4;
	data.data[index + 0] = 0;
	data.data[index + 1] = 0;
	data.data[index + 2] = 0;
	data.data[index + 3] = 30;
}
function drawPattern(canvas,ctx,data){
	var w,h;
	w = canvas.width;
	h = canvas.height;
	while (x < w){
	if (rand(1,100) < CHANCE_SPEC){
	drawSpec(data,x,y,w);
}
x++;
}
if (x === w){
	x = 0;
	y++;
}
if (y === h){
	ctx.putImageData(data,0,0);
	return;
}
drawPattern(canvas,ctx,data);
}
function main(){
	var canvas,ctx,data;
	console.log('starting1');
	canvas = document.getElementById('my-canvas');
	ctx = canvas.getContext('2d');
	data = ctx.getImageData(0,0,canvas.width,canvas.height);
	drawPattern(canvas,ctx,data);
	updateTime();
}
function updateTime(){
	var currentTime,seconds,minutes,hours,times,i;
	currentTime = new Date();
	times ={
	'second':currentTime.getSeconds(),'minute':currentTime.getMinutes(),'hour':currentTime.getHours()}
;
	for (type in times){
	if (times.hasOwnProperty(type)){
	setTimes(type,timeToString(times[type]));
}
}
setTimeout(updateTime,1000);
}
function timeToString(currentTime){
	var t;
	t = currentTime.toString();
	if (t.length === 1){
	return '0' + t;
}
return t;
}
function getPreviousTime(type){
	return $('#' + type + '-top').text();
}
function setTimes(type,timeStr){
	setTime(getPreviousTime(type + '-tens'),timeStr[0],type + '-tens');
	setTime(getPreviousTime(type + '-ones'),timeStr[1],type + '-ones');
}
function setTime(previousTime,newTime,type){
	if (previousTime === newTime){
	return;
}
setTimeout(function(){
	$('#' + type + '-top').text(newTime);
}
,150);
	setTimeout(function(){
	$('.bottom-container',$('#' + type + '-bottom')).text(newTime);
}
,365);
	animateTime(previousTime,newTime,type);
}
function animateTime(previousTime,newTime,type){
	var top,bottom;
	top = $('#top-' + type + '-anim');
	bottom = $('#bottom-' + type + '-anim');
	$('.top-half-num',top).text(previousTime);
	$('.dropper',bottom).text(newTime);
	top.show();
	bottom.show();
	$('#top-' + type + '-anim').css('visibility','visible');
	$('#bottom-' + type + '-anim').css('visibility','visible');
	animateNumSwap(type);
	setTimeout(function(){
	hideNumSwap(type);
}
,365);
}
function animateNumSwap(type){
	$('#top-' + type + '-anim').toggleClass('up');
	$('#bottom-' + type + '-anim').toggleClass('down');
}
function hideNumSwap(type){
	$('#top-' + type + '-anim').toggleClass('up');
	$('#bottom-' + type + '-anim').toggleClass('down');
	$('#top-' + type + '-anim').css('visibility','hidden');
	$('#bottom-' + type + '-anim').css('visibility','hidden');
}
$(document).ready(main);
	window.requestAnimFrame = (function(callback){
	return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback){
	window.setTimeout(callback,1000 / 60);
}
}
)();

CSS代码(style.css):

html{height:100%;}
body{overflow:hidden;color:#f8e9d6;font-family:"Lucida Sans Typewriter","Lucida Console",Monaco,"Bitstream Vera Sans Mono",monospace;font-size:110px;background-image:-webkit-radial-gradient(50% 50%,circle,rgb(103,114,140) 0%,rgb(69,76,94) 36%,rgb(34,37,46) 90%);background-image:-moz-radial-gradient(50% 50%,circle,rgb(103,114,140) 0%,rgb(69,76,94) 36%,rgb(34,37,46) 90%);background-image:-o-radial-gradient(50% 50%,circle,rgb(103,114,140) 0%,rgb(69,76,94) 36%,rgb(34,37,46) 90%);background-image:radial-gradient(50% 50%,circle,rgb(103,114,140) 0%,rgb(69,76,94) 36%,rgb(34,37,46) 90%);height:100%;margin:0px;padding:0px;}
body main{height:100%;background-size:18px 18px;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9InJnYigwLCAwLCAwKSIgc3RvcC1vcGFjaXR5PSIuMiIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSJyZ2IoMCwgMCwgMCkiIHN0b3Atb3BhY2l0eT0iLjIiLz48c3RvcCBvZmZzZXQ9IjkwJSIgc3RvcC1jb2xvcj0icmdiKDAsIDAsIDApIiBzdG9wLW9wYWNpdHk9Ii4yIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);background-image:-webkit-linear-gradient(-45deg,transparent 0%,transparent 40%,rgba(0,0,0,.2) 40%,rgba(0,0,0,.2) 50%,transparent 50%,transparent 90%,rgba(0,0,0,.2) 90%);;background-image:-moz-linear-gradient(-45deg,transparent 0%,transparent 40%,rgba(0,0,0,.2) 40%,rgba(0,0,0,.2) 50%,transparent 50%,transparent 90%,rgba(0,0,0,.2) 90%);;background-image:-o-linear-gradient(-45deg,transparent 0%,transparent 40%,rgba(0,0,0,.2) 40%,rgba(0,0,0,.2) 50%,transparent 50%,transparent 90%,rgba(0,0,0,.2) 90%);;background-image:linear-gradient(-45deg,transparent 0%,transparent 40%,rgba(0,0,0,.2) 40%,rgba(0,0,0,.2) 50%,transparent 50%,transparent 90%,rgba(0,0,0,.2) 90%);;}
body main .num-anim{display:block;position:absolute;top:0px;left:0px;height:130px;width:89px;}
body main .num-anim .top-half-num,body main .num-anim .bottom-half-num{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYig2OCwgNzUsIDkzKSIgc3RvcC1vcGFjaXR5PSIxIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoNDYsIDUwLCA2MikiIHN0b3Atb3BhY2l0eT0iMSIvPjwvbGluZWFyR3JhZGllbnQ+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNsZXNzaGF0LWdlbmVyYXRlZCkiIC8+PC9zdmc+);background-image:-webkit-linear-gradient(-90deg,rgba(68,75,93,1),rgba(46,50,62,1) 100%);background-image:-moz-linear-gradient(-90deg,rgba(68,75,93,1),rgba(46,50,62,1) 100%);background-image:-o-linear-gradient(-90deg,rgba(68,75,93,1),rgba(46,50,62,1) 100%);background-image:linear-gradient(180deg,rgba(68,75,93,1),rgba(46,50,62,1) 100%);text-align:center;overflow:hidden;padding-top:0px;}
body main .num-anim .top-half-num{height:50%;}
body main .num-anim .bottom-half-num{margin-top:0px;height:50%;margin-top:65px;background-color:#2e323e;background-image:none;}
body main .num-anim .bottom-half-num .dropper{margin-top:-68px;}
body main .num-anim.bottom-anim{left:0px;top:5px;-webkit-transform:perspective(80px) rotateX(90deg) rotateY(0deg);;-moz-transform:perspective(80px) rotateX(90deg) rotateY(0deg);;-o-transform:perspective(80px) rotateX(90deg) rotateY(0deg);;-ms-transform:perspective(80px) rotateX(90deg) rotateY(0deg);;transform:perspective(80px) rotateX(90deg) rotateY(0deg);;}
body main .num-anim.bottom-anim.down{-webkit-transform:perspective(80px) rotateX(0deg) rotateY(0deg);-moz-transform:perspective(80px) rotateX(0deg) rotateY(0deg);-o-transform:perspective(80px) rotateX(0deg) rotateY(0deg);-ms-transform:perspective(80px) rotateX(0deg) rotateY(0deg);transform:perspective(80px) rotateX(0deg) rotateY(0deg);-webkit-transition:0.25s;-moz-transition:0.25s;-o-transition:0.25s;transition:0.25s;-webkit-transition-delay:0.25s;-moz-transition-delay:0.25s;-o-transition-delay:0.25s;transition-delay:0.25s;}
body main .num-anim.top-anim{-webkit-transform:perspective(80px) rotateX(0deg) rotateY(0deg);;-moz-transform:perspective(80px) rotateX(0deg) rotateY(0deg);;-o-transform:perspective(80px) rotateX(0deg) rotateY(0deg);;-ms-transform:perspective(80px) rotateX(0deg) rotateY(0deg);;transform:perspective(80px) rotateX(0deg) rotateY(0deg);;}
body main .num-anim.top-anim.up{-webkit-transform:perspective(80px) rotateX(-90deg) rotateY(0deg);-moz-transform:perspective(80px) rotateX(-90deg) rotateY(0deg);-o-transform:perspective(80px) rotateX(-90deg) rotateY(0deg);-ms-transform:perspective(80px) rotateX(-90deg) rotateY(0deg);transform:perspective(80px) rotateX(-90deg) rotateY(0deg);-webkit-transition:0.25s;-moz-transition:0.25s;-o-transition:0.25s;transition:0.25s;}
body main canvas{height:100%;width:100%;background-color:transparent;}
body main #clock{position:absolute;top:50%;left:50%;margin:-75px 0 0 -372.5px;height:150px;width:745px;}
body main #clock .time-container{float:left;width:220px;height:150px;margin:0 0 0 20px;border:1px solid #000;-webkit-border-radius:10px;-webkit-background-clip:padding-box;-moz-border-radius:10px;-moz-background-clip:padding;border-radius:10px;background-clip:padding-box;background:rgba(24,24,40,0.5);-webkit-box-shadow:0 2px 0px rgba(255,255,255,.25),inset 0 2px 0px rgba(0,0,0,.25);-moz-box-shadow:0 2px 0px rgba(255,255,255,.25),inset 0 2px 0px rgba(0,0,0,.25);box-shadow:0 2px 0px rgba(255,255,255,.25),inset 0 2px 0px rgba(0,0,0,.25);}
body main #clock .time-container .num{position:absolute;top:0px;left:00px;display:inline-block;z-index:1;height:50%;overflow:hidden;width:100%;-webkit-box-shadow:0 2px 0px rgba(0,0,0,.25),inset 0 2px 0px rgba(255,255,255,.25);-moz-box-shadow:0 2px 0px rgba(0,0,0,.25),inset 0 2px 0px rgba(255,255,255,.25);box-shadow:0 2px 0px rgba(0,0,0,.25),inset 0 2px 0px rgba(255,255,255,.25);}
body main #clock .time-container .num.bottom{top:53%;height:46%;}
body main #clock .time-container .num.bottom .bottom-container{margin-top:-76%;}
body main #clock .time-container .fade{position:absolute;top:-105px;left:-41px;width:100%;height:200%;background-color:transparent;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjAlIiB5Mj0iMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigyNTUsIDI1NSwgMjU1KSIgc3RvcC1vcGFjaXR5PSIuMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0icmdiKDI1NSwgMjU1LCAyNTUpIiBzdG9wLW9wYWNpdHk9Ii41Ii8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);background-image:-webkit-linear-gradient(90deg,transparent 35%,rgba(255,255,255,.2),rgba(255,255,255,.5));background-image:-moz-linear-gradient(90deg,transparent 35%,rgba(255,255,255,.2),rgba(255,255,255,.5));background-image:-o-linear-gradient(90deg,transparent 35%,rgba(255,255,255,.2),rgba(255,255,255,.5));background-image:linear-gradient(0deg,transparent 35%,rgba(255,255,255,.2),rgba(255,255,255,.5));-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);z-index:2;}
body main #clock .time-container .digit{position:relative;float:left;width:88px;height:130px;margin:11px 0 0 15px;-webkit-border-radius:5px;-webkit-background-clip:padding-box;-moz-border-radius:5px;-moz-background-clip:padding;border-radius:5px;background-clip:padding-box;text-align:center;text-shadow:#ffffff 0px -3px 0px,#000000 0px 3px 0px;background-color:#353a48;-webkit-box-shadow:0 2px 0px rgba(0,0,0,.25),inset 0 2px 0px rgba(255,255,255,.25),2px 2px 3px rgba(0,0,0,1),-2px -2px 3px rgba(0,0,0,1),2px -2px 3px rgba(0,0,0,1),-2px 2px 3px rgba(0,0,0,1);-moz-box-shadow:0 2px 0px rgba(0,0,0,.25),inset 0 2px 0px rgba(255,255,255,.25),2px 2px 3px rgba(0,0,0,1),-2px -2px 3px rgba(0,0,0,1),2px -2px 3px rgba(0,0,0,1),-2px 2px 3px rgba(0,0,0,1);box-shadow:0 2px 0px rgba(0,0,0,.25),inset 0 2px 0px rgba(255,255,255,.25),2px 2px 3px rgba(0,0,0,1),-2px -2px 3px rgba(0,0,0,1),2px -2px 3px rgba(0,0,0,1),-2px 2px 3px rgba(0,0,0,1);background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYig2OCwgNzUsIDkzKSIgc3RvcC1vcGFjaXR5PSIxIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoNDYsIDUwLCA2MikiIHN0b3Atb3BhY2l0eT0iMSIvPjwvbGluZWFyR3JhZGllbnQ+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNsZXNzaGF0LWdlbmVyYXRlZCkiIC8+PC9zdmc+);background-image:-webkit-linear-gradient(-90deg,rgba(68,75,93,1),rgba(46,50,62,1) 100%);background-image:-moz-linear-gradient(-90deg,rgba(68,75,93,1),rgba(46,50,62,1) 100%);background-image:-o-linear-gradient(-90deg,rgba(68,75,93,1),rgba(46,50,62,1) 100%);background-image:linear-gradient(180deg,rgba(68,75,93,1),rgba(46,50,62,1) 100%);overflow:hidden;}
body main #clock .time-container .digit::after{content:" ";border:2px solid rgba(0,0,0,0.15);width:80px;margin-top:3px;height:121px;-webkit-border-radius:5px;-webkit-background-clip:padding-box;-moz-border-radius:5px;-moz-background-clip:padding;border-radius:5px;background-clip:padding-box;display:inline-block;}
body main #clock .time-container .digit .ring{position:absolute;top:58px;left:5px;height:20px;width:7px;background-color:#7d7d7d;-webkit-box-shadow:0 2px 0px rgba(0,0,0,.25),inset 0 2px 0px rgba(255,255,255,.25),2px 2px 1px rgba(0,0,0,.5),-2px -2px 1px rgba(0,0,0,.5),2px -2px 1px rgba(0,0,0,.5),-2px 2px 1px rgba(0,0,0,.5);-moz-box-shadow:0 2px 0px rgba(0,0,0,.25),inset 0 2px 0px rgba(255,255,255,.25),2px 2px 1px rgba(0,0,0,.5),-2px -2px 1px rgba(0,0,0,.5),2px -2px 1px rgba(0,0,0,.5),-2px 2px 1px rgba(0,0,0,.5);box-shadow:0 2px 0px rgba(0,0,0,.25),inset 0 2px 0px rgba(255,255,255,.25),2px 2px 1px rgba(0,0,0,.5),-2px -2px 1px rgba(0,0,0,.5),2px -2px 1px rgba(0,0,0,.5),-2px 2px 1px rgba(0,0,0,.5);background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYigyMDUsIDIwNSwgMjA1KSIgc3RvcC1vcGFjaXR5PSIxIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2IoNDYsIDUwLCA2MikiIHN0b3Atb3BhY2l0eT0iMSIvPjwvbGluZWFyR3JhZGllbnQ+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNsZXNzaGF0LWdlbmVyYXRlZCkiIC8+PC9zdmc+);background-image:-webkit-linear-gradient(-90deg,rgba(205,205,205,1),rgba(46,50,62,1) 100%);background-image:-moz-linear-gradient(-90deg,rgba(205,205,205,1),rgba(46,50,62,1) 100%);background-image:-o-linear-gradient(-90deg,rgba(205,205,205,1),rgba(46,50,62,1) 100%);background-image:linear-gradient(180deg,rgba(205,205,205,1),rgba(46,50,62,1) 100%);z-index:3;-webkit-border-radius:8px;-webkit-background-clip:padding-box;-moz-border-radius:8px;-moz-background-clip:padding;border-radius:8px;background-clip:padding-box;}
body main #clock .time-container .digit .ring.ring-right{left:76px;}
.swapper{position:relative;z-index:2;}

附件:下载该文件资源,减少时间成本(增值服务)