css+js实现火柴拼凑数字计时器代码-html代码-BFW代码库

css+js实现火柴拼凑数字计时器代码

代码语言：html

代码描述：css+js实现火柴拼凑数字计时器代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
body {
  height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ccc, #fff 40%);
}

.display {
  display: flex;
  gap: 3vmin;
}

.digit {
  --w: 10vmin;
  --g: -.75vmin;
  width: var(--w);
  display: grid;
  grid-template-areas:
    "top top top"
    "left . right"
    "middle middle middle"
    "bottom-left . bottom-right"
    "bottom bottom bottom";
  grid-template-columns: 1fr;
}

.digit-part {
  --hw: 100%;
  --hh: calc(var(--w) / 6.666);
  --vw: calc(var(--w) / 6.666);
  --vh: calc(var(--w) / 1.176);
  display: inline-block;
  position: relative;
  background: #feea;
}

.digit-part-on {
  background: crimson;
}

.digit-part-top {
  grid-area: top;
}

.digit-part-middle {
  grid-area: middle;
}

.digit-part-bottom {
  grid-area: bottom;
}

.digit-part-left {
  grid-area: left;
}

.digit-part-right {
  grid-area: right;
}

.digit-part-middle ~ .digit-part-left {
  grid-area: bottom-left;
}

.digit-part-middle ~ .digit-part-right {
  grid-area: bottom-right;
}

.digit-part-top,
.digit-part-bottom,
.digit-part-middle {
  width: 100%;
  height: var(--hh);
}

.digit-part-top {
  border-bottom-right-radius: 50% 100%;
  border-bottom-left-radius: 50% 100%;
}

.digit-part-bottom {
  top: calc(var(--g) * 2);
  border-top-right-radius: 50% 100%;
  border-top-left-radius: 50% 100%;
}

.digit-part-left,
.digit-part-right {
  top: var(--g);
  width: var(--vw);
  height: var(--vh);
}

.digit-part-left {
  border-top-right-radius: 100% 50%;
  border-bottom-right-radius: 100% 50%;
}

.digit-part-right {
  border-top-left-radius: 100% 50%;
  border-bottom-left-radius: 100% 50%;
}

.digit-part-middle {
  top: var(--g);
  border-radius: 50%;
  border-radius: 50%;
}

.digit-part-middle ~ .digit-part-left,
.digit-part-middle ~ .digit-part-right {
.........完整代码请登录后点击上方下载按钮下载查看