html方形表盘时钟代码实现

木君言 2周前 13浏览 0评论

HTML方形表盘时钟代码实现：

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>HTML方形表盘时钟</title>
      <style>
    
        /*设置表盘中心文字样式*/
        .center {
          position: absolute;
          border-radius: 50%;
          width: 20px;
          height: 20px;
          top: 24px;
          left: 64px;
          text-align: center;
          font-size: 15px;
        }
    
        /*设置每个刻度线样式*/
        .dial {
          position: absolute;
          width: 8px;
          height: 2px;
          background: #000;
          transform-origin: 100% 50%;
          top: 32px;
          left: 60px;
        }
    
      </style>
    </head>
    <body>
    
      <div>
        <div class="center">12</div>
        <div class="dial" style="transform: rotate(30deg);"></div>
        <div class="dial" style="transform: rotate(60deg);"></div>
        <div class="dial" style="transform: rotate(90deg);"></div>
        <div class="dial" style="transform: rotate(120deg);"></div>
        <div class="dial" style="transform: rotate(150deg);"></div>
        <div class="dial" style="transform: rotate(180deg);"></div>
        <div class="dial" style="transform: rotate(210deg);"></div>
        <div class="dial" style="transform: rotate(240deg);"></div>
        <div class="dial" style="transform: rotate(270deg);"></div>
        <div class="dial" style="transform: rotate(300deg);"></div>
        <div class="dial" style="transform: rotate(330deg);"></div>
        <div class="dial" style="transform: rotate(360deg);"></div>
      </div>
    
    </body>
    </html>

以上代码实现了一个HTML方形表盘时钟。其中，使用了CSS transform属性实现刻度线的旋转，和position和top/left属性控制盘中心及刻度线的位置。可根据需要自行修改样式。

上一篇 jquery 保存密码

下一篇 html日历选择日期的代码

网站导航

网站导航

最近发表

文章归档

html方形表盘时钟代码实现