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