分享一个纯CSS写的钟表式计时器

lanzhusiyu

2020-07-18

话不多说，先上效果图

分享一个纯CSS写的钟表式计时器

本demo没使用JavaScript，纯CSS3实现，下面是完整代码

<html>
    <head>
        <meta charset="UTF-8">
        <title>时钟</title>
        <style type="text/css">
            .screen{
              width: 400px;
              height: 400px;
              border-radius: 50%;
              border: 3px solid black;
              margin: 200px auto;
              position: relative;
            }
            .line{
              width: 3px;
              height: 400px;
              background-color: #333333;
              position: absolute;
              left: 200px;
            }
            .line:nth-child(2){
              transform: rotateZ(30deg);
            }
            .line:nth-child(3){
        transform: rotateZ(60deg);
      }
      .line:nth-child(4){
        transform: rotateZ(90deg);
      }
      .line:nth-child(5){
        transform: rotateZ(120deg);
      }
      .line:nth-child(6){
        transform: rotateZ(150deg);
      }
      .cover{
        width: 380px;
        height: 380px;
        border-radius: 50%;
        position: absolute;
        left: 10px;
        top: 10px;
        background-color: #fff;
      }
      .hour{
        width: 8px;
        height: 80px;
        background-color: red;
        position: absolute;
        top: 120px;
        left: 196px;
        transform-origin: bottom;
        animation: spin 43200s linear infinite;
      }
      .min{
        width: 6px;
        height: 120px;
        background-color: yellow;
        position: absolute;
        top: 80px;
        left: 197px;
        transform-origin: bottom;
        animation: spin 3600s linear infinite;
      }
      .second{
        width: 4px;
        height: 150px;
        background-color: green;
        position: absolute;
        top: 50px;
        left: 198px;
        transform-origin: bottom;
        animation: spin 60s linear infinite;
        animation-timing-function: steps(60);
      }
      .center{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: orange;
        position: absolute;
        top: 180px;
        left: 180px;
      }
      @keyframes spin{
          from{
            transform: rotateZ(0deg);
          }
          to{
            transform: rotateZ(360deg);
          }
      }
        </style>
    </head>
    <body>
      <div class="screen">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="cover"></div>
        <div class="second"></div>
        <div class="min"></div>
        <div class="hour"></div>
        <div class="center"></div>
      </div>
    </body>
</html>

其实很简单，就是用div结合CSS3的旋转属性把时分秒针画出来，再把刻度线等画一下；再利用CSS3的动画属性让3根针动起来即可。有兴趣的小伙伴也可以结合js代码获取当前时间并设定3根针的初始角度，让本demo变成一个实时的时钟哦~

女神镇楼

分享一个纯CSS写的钟表式计时器