css+js实现创新迷你时钟拼筹时钟显示时间代码
代码语言:html
所属分类:其他
代码描述:css+js实现创新迷你时钟拼筹时钟显示时间代码
代码标签: css js 创新 迷你 时钟 拼筹 时钟 显示 时间 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *:after, *:before { box-sizing: border-box; } :root { font-size: min(12vw, 7vh); --clock-size:1.65rem; --clock-gap:0.1rem; --hand-width: 0.1rem; --hand-height: calc((var(--clock-size) / 2) - 0.1rem); } body { margin: 0; height: 100vh; display: grid; place-items: center; background-color: #e6e3df; } .container { display: flex; gap: var(--clock-gap); } .digit { display: flex; flex-wrap: wrap; gap: var(--clock-gap); width: calc( (var(--clock-size) * 2) + var(--clock-gap)); --a1: 3; --b1: 1; --a2: 3; --b2: 1; --a3: 3; --b3: 1; --a4: 3; --b4: 1; --a5: 3; --b5: 1; --a6: 3; --b6: 1; } .digit[data-digit="0"] { --a1: 2; --b1: 1; --a2: 2; --b2: 3; --a3: 0; --b3: 2; --a4: 0; --b4: 2; --a5: 0; --b5: 1; --a6: 0; --b6: 3; } .digit[data-digit="1"] { --a1: 2.6; --b1: 2.6; --a2: 2; --b2: 2; --a3: 2.6; --b3: 2.6; --a4: 0; --b4: 2; --a5: 2.6; --b5: 2.6; --a6: 0; --b6: 0; } .digit[data-digit="2"] { --a1: 1; --b1: 1; --a2: 2; --b2: 3; --a3: 1; --b3: 2; --a4: 0; --b4: 3; --a5: 0; --b5: 1; --a6: 3; --b6: 3; } .digit[data-digit="3"] { --a1: 1; --b1: 1; --a2: 2; --b2: 3; --a3: 1; --b3: 1; --a4: 0; --b4: 3; --a5: 1; --b5: 1; --a6: 0; --b6: 3; } .digit[data-digit="4"] { --a1: 2; --b1: 2; --a2: 2; --b2: 2; --a3: 0; --b3: 1; --a4: 0; --b4: 2; --a5: 2.6; --b5: 2.6; --a6: 0; --b6: 0; } .digit[data-digit="5"] { --a1: 1; --b1: 2; --a2: 3; --b2: 3; --a3: 0; --b3: 1; --a4: 3; --b4: 2; --a5: 1; --b5: 1; --a6: 0; --b6: 3; } .digit[data-digit="6"] { --a1: 1; --b1: 2; --a2: 3; --b2: 3; --a3: 0; --b3: 2; --a4: 3; --b4: 2; --a5: 0; --b5: 1; --a6: 0; --b6: 3; } .digit[data-digit="7"] { --a1: 1; --b1: 1; --a2: 3; --b2: 2; --a3: 2.6; --b3: 2.6; --a4: 0; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0