纯CSS实现钟表

最新推荐文章于 2024-10-19 23:15:46 发布

SoloTravelerHQ

最新推荐文章于 2024-10-19 23:15:46 发布

阅读量1.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端笔记文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/huangqiang80/article/details/121232259

前端笔记专栏收录该内容

10 篇文章

订阅专栏

这篇博客介绍了如何使用纯CSS创建一个动态钟表，包括秒针、分针和时针的旋转效果。通过设置不同宽度和长度的div作为指针，并运用CSS动画实现旋转，最终在网页上展示了一个功能齐全的钟表。背景使用了表盘图片，整个过程无需JavaScript，完全依赖于CSS的定位和动画属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

纯CSS实现钟表

思路：

1、先创建一个表盘div。

2、再在表盘div里设置三个子div，分别作为秒针、分针、时针的旋转载体

3、最后在三个子div里分别再设置一个div，作为秒针、分针、时针

4、表盘可以用背景图片，也可以用css写，我这里直接百度了一张表盘的图片
效果：
在这里插入图片描述
图片：

代码：

<style>
  /* 表盘 */
  .biao-pan {
    width: 300px;
    height: 300px;
    margin: 150px auto;
    border-radius: 50%;
    position: relative;
    background-image: url(./img/yazi.png);
    background-size: cover;
  }

  /* 设置旋转载体相对于表盘左右垂直居中 */
  .miao-zhen,
  .fen-zhen,
  .shi-zhen {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }

  /* 设置指针左右居中 */
  .miao,
  .fen,
  .shi {
    position: absolute;
    right: 0;
    left: 0;
    margin: 0 auto;
  }

  /* 设置秒针 */
  .miao-zhen {
    width: 280px;
    height: 280px;
    animation: move 60s linear infinite;
  }

  .miao {
    height: 140px;
    width: 1px;
    background-color: black;

  }

  /* 设置分针 */
  .fen-zhen {
    width: 220px;
    height: 220px;
    animation: move 3600s linear infinite;
  }

  .fen {
    height: 110px;
    width: 2px;
    background-color: black;

  }

  /* 设时针 */
  .shi-zhen {
    width: 180px;
    height: 180px;
    animation: move 43200s linear infinite;
  }

  .shi {
    height: 90px;
    width: 4px;
    background-color: black;
  }

  /* 设置指针从0度转到360度 */
  @keyframes move {
    from {
      transform: rotateZ(0);
    }

    to {
      transform: rotateZ(360deg);
    }
  }
</style>

<body>
  <div class="biao-pan">
    <div class="miao-zhen">
      <div class="miao"></div>
    </div>
    <div class="fen-zhen">
      <div class="fen"></div>
    </div>
    <div class="shi-zhen">
      <div class="shi"></div>
    </div>
  </div>
</body>