jquery实现一个二进制时钟效果代码-html代码-BFW代码库

jquery实现一个二进制时钟效果代码

代码语言：html

所属分类：其他

代码描述：jquery实现一个二进制时钟效果代码

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
<style>
    body{
  background-color:#ecf0f1;
}

.center{
  margin: auto;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}

table{
  border-collapse:separate; 
  border-spacing:3em;
}

table td{
  height:30px;
  width:30px;
  background-color:white;
  border-radius:50%;
}

.num1{
  background-color:#2ecc71 !important;
  box-shadow: 0px 0px 15px 2px rgba(46, 204, 113,.7);
}

.num0{
  background-color:white !important;
  box-shadow: 0px 0px 15px 2px rgba(0,0,0,.2);
}

p{
  text-align:Center;
  color:#2ecc71;
  font-family:arial;
  font-size:28px;
  font-weight:bold;
  font-family: 'Montserrat', sans-serif;
}

.seconds:after{
  position:absolute;
  content:"seconds";
  color:#bdc3c7;
  font-family: 'Montserrat', sans-serif;
}

.minutes:after{
  position:absolute;
  content:"minutes";
  color:#bdc3c7;
  font-family: 'Montserrat', sans-serif;
}

.hours:after{
  position:absolute;
  content:"hour";
  color:#bdc3c7;
  font-family: 'Montserrat', sans-serif;
}
</style>
</head>

<body>
    <div class='center'>
        <p></p>
        <table>
            <tr class='hours'>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr class='minutes'>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr class='seconds'>
                <td></td>
                <td></.........完整代码请登录后点击上方下载按钮下载查看