前端学习——CSS3实现时钟效果

CSS3实现时钟效果

最近想开始认真学习，然后想把学习记录下来，就写在博客这里了。
最先是用CSS实现的是一个时钟的效果，如下图：

实现效果

1.圆盘

说到时钟，肯定最先想到的是一个圆，所以就从一个圆开始。
先写一个div，然后给相关的样式

<div class="clock"></div>
.clock{
   
      position: absolute;
      width: 250px;
      height: 250px;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      background-color: #ffffff;
      border-radius: 50%;
      border:10px double black;
      
    }

2.刻度

其次当然就是刻度的问题了，刻度用什么可以实现了，不可能再用div了，因为太多了，就想到了列表 “ul"和"li”。

<ul class="list">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
 ul{
   
      height: 250px;
      position: relative;
      list-style: none;
    }
  ul li{
   
      width: 2px;
      height: 5px;
      background-color: #000000;
      position: absolute;
      left:124px; 
      top: 0;
      -webkit-transform-origin:center 125px;
    }