css+js实现中性倒计时数字时钟效果代码-html代码-BFW代码库

css+js实现中性倒计时数字时钟效果代码

代码语言：html

代码描述：css+js实现中性倒计时数字时钟效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&display=swap" rel="stylesheet">




    <style>
        html {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100vw;
          height: 100vh;
          background-color: #c3cfe2;
        }
        
        .clock {
          display: flex;
          text-align: center;
        }
        .clock__item {
          height: 80px;
          margin: 0 0.5rem;
          padding: 1rem;
          border-radius: 9px;
          background-color: #c3cfe2;
          color: #f5f7fa;
          font-family: Helvetica, sans-serif;
          font-size: 80px;
          box-shadow: 20px 20px 60px #a6b0c0, -20px -20px 60px #e0eeff;
        }
        .clock__colon {
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
        }
        .clock__colon-item {
          width: 1rem;
          height: 1rem;
          background-color: #f5f7fa;
          box-shadow: 20px 20px 60px #a6b0c0, -20px -20px 60px #e0eeff;
          border-radius: 50%;
        }
    </style>



</head>

<body>
    <div class="clock">
        <div class="clock__item">
            <span class="days"></span>
        </div>
        <div class="clock__colon">
            <div class="clock__colon-item"></div>
            <div class="clock__colon-item"></div>
        </div>
        <div class="clock__item">
            <span class="hours"></span>
        </div>
        <div class="clock__colon">
            <div class="clock__colon-item"></div>
            <div class="clock__colon-item"></div>
        </div>
        <div class="clock__item">
            <span class="minutes"></span>
        </div>
        <div class="clock__colon">
            <div class=&quo.........完整代码请登录后点击上方下载按钮下载查看