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

代码语言:html

所属分类:其他

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

代码标签: css 多米诺 骨牌 时钟

下面为部分代码预览,完整代码请点击下载或在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&.........完整代码请登录后点击上方下载按钮下载查看

网友评论0