div+js实现l红色led数字时钟效果代码-html代码-BFW代码库

div+js实现l红色led数字时钟效果代码

代码语言：html

代码描述：div+js实现l红色led数字时钟效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        * { margin: 0; padding: 0; box-sizing: border-box }
        body { 
          min-height: 100vh;
          display: grid;
          place-items: center;
          background-color: #060606;
        }
        .clock {
          display: flex; 
          gap: calc(var(--segment-length) / 2);
          --segment-width: 2vmin;
          --segment-length: 6vmin;
          --segment-gap: .75vmin;
          --segment-color: #1D1E22;
          --segment-color-active: red;
          --colon-color: white;
          transform: skew(-15deg)
        }
        .colon {
          display: grid;
          width: var(--segment-width);
          gap: var(--segment-width);
          align-self: center;
        }
        .colon::before, .colon::after{
          content: "";
          aspect-ratio: 1;
          background-color: var(--colon-color);
          border-radius: 50%;
        }
        .digit {
          display: grid;
          gap: var(--segment-gap);
          grid-template:
            '.... r1c2 ....' var(--segment-width)
           .........完整代码请登录后点击上方下载按钮下载查看