css+js实现多米诺骨牌时钟时间显示效果代码-html代码-BFW代码库

css+js实现多米诺骨牌时钟时间显示效果代码

代码语言：html

所属分类：其他

代码描述：css+js实现多米诺骨牌时钟时间显示效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        @import url("https://fonts.googleapis.com/css2?family=Staatliches&display=swap");
        
        * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
        }
        body {
                min-height: 100vh;
                display: grid;
                place-content: center;
                font-family: "Staatliches", cursive;
                gap: 2rem;
        
                background: rgb(19, 19, 19);
                color: rgba(240, 240, 240);
        }
        h1 {
                font-size: 3rem;
        }
        h1 > span {
                font-size: 1rem;
                color: rgb(80, 80, 80);
        }
        .dominos-container {
                display: flex;
                gap: 2em;
                align-items: center;
                font-size: 1vw;
        }
        .colon,
        .ampm {
                font-size: 5em;
        }
        .domino {
                width: 12em;
                background: linear-gradient(to bottom right, rgb(39, 39, 39), rgb(17, 17, 17));
                box-shadow: inset 0.1em 0.1em 0.2em rgba(255, 255, 255, 0.2),
                        inset -0.1em -0.1em 0.2em rgba(0, 0, 0, 0.9), 0.1em 0.1em 2em rgba(0, 0, 0, 1);
                display: grid;
                border-radius: 1em;
                gap: 2em;
                padding: 2em;
        }
        .domino::before {
                content: "";
                height: 0.25em;
                background: white;
                grid-row: 2;
                border-radius: 0.25em;
        }
        .domino .part {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 1em;
      .........完整代码请登录后点击上方下载按钮下载查看