jquery+css实现绿色led数字时钟代码

代码语言:html

所属分类:布局界面

代码描述:jquery+css实现绿色led数字时钟代码

代码标签: jquery css 绿色 led 数字 时钟 代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body { background-color:#f5f5f5; }

.clock { background-color:#222; height:30px; width:145px; padding-top:5px; padding-left:0px; padding-right:5px; border-radius:6px; border:2px solid #444; margin-top:150px; box-shadow: 0px 0px 10px #222; }
.clock .digit { float:left; width:20px; height:25px; }
.clock .spacer { float:left; height:25px; padding-top:5px; padding-left:5px; }
.clock .spacer .pixel { width:5px; height:5px; background-color:#82D14D; box-shadow:0px 10px #82D14D; }
.clock .digit  .pixel { width:5px; height:5px; background-color:#444;
    box-shadow:5px 0px #444, 10px 0px #444,
							 0px 5px #444, 10px 5px #444,
							 0px 10px #444, 5px 10px #444, 10px 10px #444,
	  					 0px 15px #444, 10px 15px #444,
							 0px 20px #444, 5px 20px #444, 10px 20px #444; }
.clock .digit ._1 {
		box-shadow:5px 0px #444, 10px 0px #82D14D,
							 0px 5px #444, 10px 5px #82D14D,
							 0px 10px #444, 5px 10px #444, 10px 10px #82D14D,
	  					 0px 15px #444, 10px 15px #82D14D,
							 0px 20px #444, 5px 20px #444, 10px 20px #82D14D; }
.clock .digit ._2 {
		background-color:#82D14D;
		box-shadow:5px 0px #82D14D, 10px 0px #82D14D,
							 0px 5px #444, 10px 5px #82D14D,
							 0px 10px #82D14D, 5px 10px #82D14D, 10px 10px #82D14D,
	  					 0px 15px #82D14D, 10px 15px #444,
							 0px 20px #82D14D, 5px 20px #82D14D, 10px 20px #82D14D; }
.clock .digit ._3 {
		background-color:#82D14D;
		box-shadow:5px 0px #82D14D, 10px 0px #82D14D,
							 0px 5px #444, 10px 5px #82D14D,
							 0px 10px #82D14D, 5px 10px #82D14D, 10px 10px #82D14D,
	  					 0px 15px #444, 10px 15px #82D14D,
							 0px 20px #82D14D, 5px 20px #82D14D, 10px 20px #82D14D; }
.clock .digit ._4 {
		background-color:#82D14D;
		box-shadow:5px 0px #444, 10px 0px #82D14D,
							 0px 5px #82D14D, 10px 5px #82D14D,
							 0px 10px #82D14D, 5px 10px #82D14D, 10px 10px #82D14D,
	  					 0px 15px #444, 10px 15px #82D14D,
							 0px 20px #444, 5px 20px #444, 10px 20px #82D14D; }
.clock .digit ._5 {
		background-color:#82D14D;
		box-shadow:5px 0px #82D14D, 10px 0px #82D14D,
							 0px 5px #82D14D, 10px 5px #444,
							 0px 10px #82D14D, 5px 10px #82D14D, 10px 10px #82D14D,
	  					 0px 15px #444, 10px 15px #82D14D,
							 0px 20px #82D14D, 5px 20px #82D14D, 10px 20px #82D14D; }
.clock .digit ._6 {
		background-color:#82D14D;
		box-shadow:5px 0px #82D14D, 10px 0px #82D14D,
							 0px 5px #82D14D, 10px 5px #444,
							 0px 10px #82D14D, 5px 10px #82D14D, 10px 10px #82D14D,
	  					 0px 15px #82D14D, 10px 15px #82D14D,
							 0px 20px #82D14D, 5px 20px #82D14D, 10px 20px #82D14D; }
.clock .digit ._7 {
		background-color:#82D14D;
		box-shadow:5px 0px #82D14D, 10px 0px #82D14D,
							 0px 5px #444, 10px 5px #82D14D,
							 0px 10px #444, 5px 10px #444, 10px 10px #82D14D,
	  					 0px 15px #444, 10px 15px #82D14D,
							 0px 20px #444, 5px 20px #444, 10px 20px #82D14D; }
.clock .digit ._8 {
		background-color:#82D14D;
		box-shadow:5px 0px #82D14D, 10px 0px #82D14D,
							 0px 5px #82D14D, 10px 5px #82D14D,
							 0px 10px #82D14D, 5px 10px #82D14D, 10px 10px #82D14D,
	  					 0px 15px #82D14D, 10px 15px #82D14D,
							 0px 20px #82D14D, 5px 20px #82D14D, 10px 20px #82D14D; }
.clock .digit ._9 {
		background-color:#82D14D;
		box-shadow:5px 0px #82D14D, 10px 0px #82D14D,
							 0px 5px #82D14D, 10px 5px #82D14D,
							 0px 10px #82D14D, 5px 10px #82D14D, 10px 10px #82D14D,
	  					 0px 15px #444, 10px 15px #82D14D,
							 0px 20px #444, 5px 20px #444, 10px 20px #82D14D; }
.clock .digit ._0 {
		background-color:#82D14D;
		box-shadow:5px 0px #82D14D, 10px 0px #82D14D,
							 0px 5px #82D14D, 10px 5px #82D14D,
							 0px 10px #82D14D, 5px 10px #444, 10px 10px #82D14D,
	  					 0px 15px #82D14D, 10px 15px #82D14D,
							 0px 20px #82D14D, 5px 20px #82D14D, 10px 20px #82D14D; }

body {
  background: rgb(17,17,17); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  rgba(17,17,17,1) 1%, rgba(34,34,34,1) 100%); /* FF3.6+ */
background: -w.........完整代码请登录后点击上方下载按钮下载查看

网友评论0