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;
        }
        
        .part span {
        	aspect-ratio: 1/1;
        	width: 100%;
        	border-radius: 50%;
        	box-shadow: inset 0.1em 0.1em 0.1em rgba(0, 0, 0, 0.7),
        		inset -0.1em -0.1em 0.1em rgba(255, 255, 255, 0.1);
        	background-image: linear-gradient(transparent 50%, rgba(240, 240, 240) 50%);
        	background-size: 100% 220%;
        	background-position: 0 0%;
        	transition: background-position 0.25s ease;
        }
        
        .part span.active {
        	background-position: 0 -90%;
        }
    </style>


</head>

<body>
    <h1>Domino Clock <span class="time">0:00:00 PM</span></h1>
    <div class="dominos-container">
        <div class="domino">
            <div class="part part-top">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="part part-bottom">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="colon">:</div>
        <div class="domino">
            <div class="part part-top">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="part part-bottom">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>

        <div class="domino">
            <div class="part part-top">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="part part-bottom">
  .........完整代码请登录后点击上方下载按钮下载查看