jquery实现极简黑色时钟指针走动与数字显示代码-html代码-BFW代码库

jquery实现极简黑色时钟指针走动与数字显示代码

代码语言：html

所属分类：其他

代码描述：jquery实现极简黑色时钟指针走动与数字显示代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  


  
  
<style>
body, html{margin:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;background:#222426;font-family: 'Open Sans', sans-serif;color:#D3D3D4;}

/*DIGITAL CLOCK*/
.dl-clock{position:absolute;line-height:100%;width:100%;top:50%;text-align:center;transition:left 800ms}
.dl-clock span:not(:last-child){margin-right:0.5em}

/*ANALOGIC CLOCK*/
.an-clock{border-radius:100%;display:inline-block;box-shadow:0 0 0 0.1em #D3D3D4;width:100%;height:100%;position:relative;background:#222426;}
.an-clock::before, .an-clock::after{content:'';display:block;position:absolute;z-index:-1;height:80%;top:10%;left:50%;box-shadow:0 -2em 0 #D3D3D4, 0 2em 0 #D3D3D4;width:0.1em;margin-left:-0.05em}
.an-clock::after  {-webkit-transform:rotate(90deg)}
.an-clock .hand   {background:-webkit-linear-gradient(top, #D3D3D4 45%, transparent 45%); position:absolute;left:50%;border-radius:100%;height:70%;top:15%;width:0.1em;margin-left:-0.05em}
.an-clock .hand.h {background:-webkit-linear-gradient(top, #3B70A5 45%, transparent 45%);z-index:4}
.an-clock .hand.s {background:-webkit-linear-gradient(top, #FE0000 45%, transparent 45%);z-index:2}

.slide{width:100%;height:100%;position:absolute;left:0;top:0;overflow:hidden}
.slide .an-clock{height:50%;transition:left 800ms}
.slide .dl-clock{margin-top:-100px}

/*SWITCH*/
.switch {position:fixed;bottom:20px;width:100%;text-align:center;height:50px;line-height:50px}
.switch .sw:hover{cursor:pointer}
.switch:active{margin:2px 0 -2px}
.switch .dl-clock{font-size:16px;margin-top:-8px}
.switch .an-clock{height:50px}

/*TOGGLES*/
.slide .an-clock.none{left:-2000px!important;}
.slide .dl-clock.none{left:2000px;}
.switch .dl-clock.none,
.switch .an-clock.none{display:none}
</style>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
  

</head>

<body  >

<div class="slide">
  <div class="an-clock sw"></div>
  <div class="dl-clock sw none"></div>
</div>

<div class="switch">
  <.........完整代码请登录后点击上方下载按钮下载查看