div+css实现的简单秒表计时器效果代码-html代码-BFW代码库

代码语言：html
代码描述：div+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@300&display=swap" rel="stylesheet">



    <style>
        *,
        *:before,
        *:after {
          box-sizing: border-box;
          line-height: 1rem;
          font-family: inherit;
        }
        
        html {
          --paper: #f2f2f2;
          --ink: #333;
          font-family: "Roboto Mono", monospace;
          font-size: 1.5rem;
        }
        
        body {
          margin: 0;
          min-height: 100vh;
          color: var(--ink);
          background-color: var(--paper);
          display: flex;
          justify-content: center;
          align-items: center;
        }
        
        #ui {
          width: 100%;
          max-width: 18rem;
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          align-items: center;
          gap: 1rem;
          padding: 0.5rem;
        }
        
        .outline, input[name=state]#reset:focus ~ .reset-btn, input[name=state]#pause:focus ~ .pause-btn, input[name=state]#start:focus ~ .start-btn {
          outline: 1px solid var(--paper);
          outline-offset: 1px;
        }
        
        .disabled, input[name=state]#reset:checked ~ .pause-btn, input[name=state]#pause:checked ~ .pause-btn, input[name=state]#start:checked ~ .reset-btn,
        input[name=state]#start:checked ~ .start-btn {
          pointer-events: none;
          color: #aaa;
          opacity: 0.4;
        }
        
        input[name=state] {
          position: absolute;
          opacity: 0;
          left: -100vw;
        }
        input[name=state]#start:checked ~ #stopwatch .digits {
          -webkit-animation-play-state: running;
                  animation-play-state: running;
        }
        input[name=state]#start:checked ~ .pause-btn {
          display: block;
        }
        input[name=state]#pause:checked ~ #stopwatch .number-wrapper {
          -webkit-animation: blink 1s steps(1) infinite forwards;
                  animation: blink 1s steps(1) infinite forwards;
        }
        input[name=state]#pause:checked ~ #stopwatch .digits {
          -webkit-animation-play-state: paused;
                  animation-play-state: paused;
        }
        input[name=state]#pause:checked ~ .reset-btn {
          display: block;
        }
        input[name=state]#pause:checked ~ .start-btn {
          display: block;
        }
        input[name=state]#reset:checked ~ #stopwatch .digits {
          -webkit-animation-name: none;
                  animation-name: none;
        }
        label.btn {
          background: var(--ink);
          color: var(--paper);
          padding: 0.5rem;
          border: 1px solid var(--paper);
          min-width: 5rem;
          text-align: center;
          display: block;
          flex: 1 1 auto;
          font-size: 75%;
        }
        
        #stopwatch {
          border: 1px solid;
          padding: 1.5rem;
          flex: 1 0 100%;
          text-align: center;
          justify-content: center;
          margin: 0 auto;
          background: var(--paper);
        }
        #stopwatch .number-wrapper {
          overflow: hidden;
          display: flex;
          justify-content: center;
        }
        
        .digits {
          display: grid;
          grid-template-rows: 100%;
          grid-template-columns: 1rem;
          line-height: 1rem;
          height: 1rem;
          width: auto;
          width: 1.125rem;
          will-change: transform;
        }
        .digits.hours {
          -webkit-animation: twelfths 43200s steps(12, end) infinite;
                  animation: twelfths 43200s steps(12, end) infinite;
          -webkit-animation-play-state: paused;
                  animation-play-state: paused;
        }
        .digits.minutes {
          -webkit-animation: sixtieths 3600s steps(60, end) infinite;
                  animation: sixtieths 3600s steps(60, end) infinite;
          -webkit-animation-play-state: paused;
                  animation-play-state: paused;
        }
        .digits.seconds {
          -webkit-animation: sixtieths 60s steps(60, end) infinite;
                  animation: sixtieths 60s steps(60, end) infinite;
          -webkit-animation-play-state: paused;
                  animation-play-state: paused;
        }
        .digits.hundredths {
          -webkit-animation: hundredths 1s steps(100, end) infinite;
                  animation: hundredths 1s steps(100, end) infinite;
          -webkit-animation-play-state: paused;
                  animation-play-state: paused;
        }
        
        @-webkit-keyframes sixtieths {
          from {
            transform: translateY(0);
          }
          to {
            transform: translateY(-60rem);
          }
        }
        
        @keyframes sixtieths {
          from {
            transform: translateY(0);
          }
          to {
            transform: translateY(-60rem);
          }
        }
        @-webkit-keyframes hundredths {
          from {
            transform: translateY(0);
          }
          to {
            transform: translateY(-100rem);
          }
        }
        @keyframes hundredths {
          from {
            transform: translateY(0);
          }
          to {
            transform: translateY(-100rem);
          }
        }
        @-webkit-keyframes twelfths {
          from {
            transform: translateY(0);
          }
          to {
            transform: translateY(-12rem);
          }
        }
        @keyframes twelfths {
          from {
            transform: translateY(0);
          }
          to {
            transform: translateY(-12rem);
          }
        }
        @-webkit-keyframes blink {
          0% {
            opacity: 1;
          }
          50% {
            opacity: 0;
          }
        }
        @keyframes blink {
          0% {
            opacity: 1;
          }
          50% {
            opacity: 0;
          }
        }
    </style>



</head>

<body>
    <section id="ui">
        <input type="radio" id="start" name="state">
        <input type="radio" id="pause" name="state">
        <input type="radio" id="reset" name="state" checked>

        <label for="start" class="btn start-btn">Start</label>
        <label for="pause" class="btn pause-btn">Pause</label>
        <label for="reset" class="btn reset-btn">Reset</label>

        <div id="stopwatch">
            <div class="number-wrapper">
                <div class="digits hours">
                    <div>00</div>
                    <div>01</div>
                    <div>02</div>
                    <div>03</div>
                    <div>04</div>
                    <div>05</div>
                    <div>06</div>
                    <div>07</div>
                    <div>08</div>
                    <div>09</div>
                    <div>10</div>
                    <div>11</div>
                </div>
                :
                <div class="digits minutes">
                    <div>00</div>
                    <div>01</div>
                    <div>02</div>
                    <div>03</div>
                    <div>04</div>
                    <div>05</div>
                    <div>06</div>
                    <div>07</div>
                    <div>08</div>
                    <div>09</div>
                    <div>10</div>
                    <div>11</div>
                    <div>12</div>
                    <div>13</div>
                    <div>14</div>
                    <div>15</div>
                    <div>16</div>
                    <div>17</div>
                    <div>18</div>
                    <div>19</div>
                    <div>20</div>
                    <div>21</div>
                    <div>22</div>
                    <div>23</div>
                    <div>24</div>
                    <div>25</div>
                    <div>26</div>
                    <div>27</div>
                    <div>28</div>
                    <div&g.........完整代码请登录后点击上方下载按钮下载查看