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