js+css实现复古积木数字时钟效果代码
代码语言:html
所属分类:布局界面
代码描述:js+css实现复古积木数字时钟效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; background: #333; } .clock { display: flex; } .grid { width: 66px; display: flex; flex-flow: wrap; margin: 0 4px; } .spacer { width: 22px; display: flex; flex-direction: column; justify-content: space-around; } .pixel { width: 20px; height: 20px; margin: 1px; box-sizing: border-box; transition: background-color 0.2s ease; } .pixel.active:not(.second) { background-color: #FDFB42; } .pixel.second:not(.active) { background-color: #595959; } .pixel.second.active { background-color: #73FFFD; } .s-pixel { border: 11px solid transparent; } .s-pixel:nth-child(4) { border-left-color: #fff; border-top-color: #fff; } </style> </head> <body> <div class="clock"> <div class="grid" id="grid-1"> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> </div> <div class="grid" id="grid-2"> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> </div> <div class="spacer"> <div class="s-pixel"></div> <div class="s-pixel"></div> <div class="s-pixel"></div> <div class="s-pixel"></div> <div class="s-pixel"></div> </div> <div class="grid" id="grid-3"> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class="pixel"></div> <div class=&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0