数码时钟

下载代码

html

css

分享到微信朋友圈

html

</div>

</div>

</div>

css

body {background-color:#112;}

.nixcont{margin-left:  auto;
         margin-right: auto;   
         width: fit-content;
         overflow: hidden;}

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

.nixpair{padding:0px 5px; float:left; height:100px;pointer-events:none;}

.nixbg{
font-family: 'Josefin Sans', sans-serif;
font-size:70px;

box-sizing:border-box;
position:relative;height:80px;line-height:80px; width:50px; float:left;
border-radius: 20px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;

padding-top:8px; margin:0px 5px;

box-shadow: 
inset 0px 1px 3px 2px rgba(90,  0,   0, 0.9),
inset 0px 2px 2px 3px rgba(230, 220, 0, 1),
inset 0px 4px 4px 3px rgba(255, 0,   0, 0.9);

background-image:url("http://www.jq22.com/tp/9fcf8fd2-fe09-45d2-873a-744b12b00065.png"), 
                 -webkit-linear-gradient(top, rgba(35, 20, 40,  0.7), 
                                              rgba(35, 20, 40,  0.5), 
                                              rgba(35, 20, 110, 0.7));

background-image:url("http://www.jq22.com/tp/9fcf8fd2-fe09-45d2-873a-744b12b00065.png"), 
                    -moz-linear-gradient(top, rgba(35, 20, 40,  0.7), 
                                              rgba(35, 20, 40,  0.5), 
                                              rgba(35, 20, 110, 0.7));

background-image:url("http://www.jq22.com/tp/9fcf8fd2-fe09-45d2-873a-744b12b00065.png"), 
                     -ms-linear-gradient(top, rgba(35, 20, 40,  0.7), 
                                              rgba(35, 20, 40,  0.5), 
                                              rgba(35, 20, 110, 0.7));

background-image:url("http://www.jq22.com/tp/9fcf8fd2-fe09-45d2-873a-744b12b00065.png"), 
                      -o-linear-gradient(top, rgba(35, 20, 40,  0.7), 
                                              rgba(35, 20, 40,  0.5), 
                                              rgba(35, 20, 110, 0.7));

background-image:url("http://www.jq22.com/tp/9fcf8fd2-fe09-45d2-873a-744b12b00065.png"), 
                         linear-gradient(top, rgba(35, 20, 40,  0.7), 
                                              rgba(35, 20, 40,  0.5), 
                                              rgba(35, 20, 110, 0.7));

background-repeat:repeat, no-repeat;
background-size:12px, 100%;
}

.nixbg:after{
content:'';
display:block;
position:absolute;top:100%; left:0; width:100%; height:20%; background-color:gray;
border-bottom-left-radius:35%;
border-bottom-right-radius:35%;

background-image:-webkit-radial-gradient(  40% 100% , #ea4 0%, #f93 15%, #caa 50%, #778 75%, #345 100%   );
background-image:   -moz-radial-gradient(  40% 100% , #ea4 0%, #f93 15%, #caa 50%, #778 75%, #345 100%   );
background-image:    -ms-radial-gradient(  40% 100% , #ea4 0%, #f93 15%, #caa 50%, #778 75%, #345 100%   );
background-image:     -o-radial-gradient(  40% 100% , #ea4 0%, #f93 15%, #caa 50%, #778 75%, #345 100%   );
background-image:        radial-gradient(  40% 100% , #ea4 0%, #f93 15%, #caa 50%, #778 75%, #345 100%   );
}

.nixbg .nix{
width:100%; text-align:center; position:absolute; 
color:rgba(60, 40, 20, 1  );
pointer-events:none;
transition:color 0.5s, text-shadow 0.5s;
transition-timing-function:ease-out;

}

.nixbg .nix_open{
transition:color 0.2s, text-shadow 0.2s;
transition-timing-function:ease-out;

color: transparent; 
text-shadow: 
0   0   1px  rgba(254, 252, 124, 1    ),
0   0   3px  rgba(255, 217, 54,  0.7  ),
0   0   5px  rgba(255, 0,   0,   1    ),
0   0   14px rgba(255, 0,   0,   1    ),
0   0   17px rgba(255, 0,   0,   1    ),
0   0   20px rgba(255, 0,   0,   1    ),
0   5px 25px rgba(0,   0,   255, 0.9  );

font-weight:300;
z-index:10;
}

JavaScript

//These functions help add, remove or toggle css classes

function tog_class(id, cl) {
  var elem = document.getElementById(id);
  if (elem.classList.contains(cl) === true) {
    elem.classList.remove(cl);
  } else {
    elem.classList.add(cl);
  }
}

function add_class(id, cl) {
  var elem = document.getElementById(id);
  if (elem.classList.contains(cl) !== true) {
    elem.classList.add(cl);
  }
}

function rem_class(id, cl) {
  var elem = document.getElementById(id);
  if (elem.classList.contains(cl) === true) {
    elem.classList.remove(cl);
  }
}

//This function gets the date and does operations using H/M/S

function startTime() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();

var h1 = (h - h % 10) / 10;
  var h2 = h % 10;

var m1 = (m - m % 10) / 10;
  var m2 = m % 10;

var s1 = (s - s % 10) / 10;
  var s2 = s % 10;

set_nix_class("s1", s1);
  set_nix_class("s2", s2);

set_nix_class("m1", m1);
  set_nix_class("m2", m2);

set_nix_class("h1", h1);
  set_nix_class("h2", h2);

var t = setTimeout(startTime, 500);
}

//This function calls the appropriate class changes

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg