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

代码语言:html

所属分类:布局界面

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

代码标签: 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).........完整代码请登录后点击上方下载按钮下载查看

网友评论0