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