利用HTML+css制作简易时钟

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
             {
                  margin: 0;
                  padding: 0;
             }
            html,body {
                  width: 100%;
                  height: 100%;
             }
            
            /* 画一个圆,做表盘 */
             .clock {
                   width: 400px;
                   height: 400px;
                   border: 1px solid #FFC0CB;
                   border-radius: 50%;
                  /* 居中 */
                   margin: 50px auto;
                   position: relative;
                  background-color: #FCF9F9;
                  box-shadow: 0 0 5px 2px;
             }

            /* 设置绝对定位,方便接下来的操作 */
             .clock>div {
                  position: absolute;
             }
             
             /* 刻度线 */
             .line {
                  width: 2px;
                  height: 100%;
                  background-color: #ccc;
                  margin-left: -1px;
                  left: 50%;
             }
             .line:first-child{/* 不用设置,默认状态 */

             }
             .line:nth-child(2){
                  transform: rotate(30deg);
             }
             .line:nth-child(3){
                  transform: rotate(60deg);
             }
             .line:nth-child(4){
                  transform: rotate(90deg);
             }
             .line:nth-child(5){
                  transform: rotate(120deg);
             }
             .line:nth-child(6){
                  transform: rotate(150deg);
             }
             
             /* 在表盘上再覆盖一个圆,使刻度线为10px */
            .cover {
                  width: 380px;
                  height: 380px;
                  background-color: #fcf9f9;
                  border-radius: 50%;                
                  left: 50%;
                  top: 50%;
                 /* 进行定位 */
                 margin-top: -190px;
                  margin-left: -190px;
             }
             
            /* 时针 */
            .h {
                  width: 6px;
                  height: 90px;
                  background-color: #999;
                  margin-left: -3px;
                  left: 50%;
                  top: 100px;
                 /* 改变旋转基点为bottom，使其绕着底部旋转 */
                  transform-origin:bottom;    
                 /* 添加动画,steps(60)是animation-timing-function动画速度曲线的一种,意为分为60个阶段             */
                  animation: rotate  43200s steps(60) infinite;
             }

            /* 分针 */
             .m {
                  width: 4px;
                  height: 130px;
                  background-color: #90EE90;
                  margin-left: -2px;
                  left: 50%;
                  top: 60px;
                  transform-origin:bottom;
                  animation: rotate  3600s steps(60) infinite;
             }
            
            /* 秒针 */
            .s {
                  width: 2px;
                  height: 160px;
                  background-color: pink;
                  margin-left: -1px;
                  left: 50%;
                  top: 30px;
                  transform-origin:bottom;
                  animation: rotate  60s steps(60) infinite;
             }
             
            /* 中间点 */
            .dotted {
                  width: 20px;
                  height: 20px;
                  border-radius: 50%;
                  background-color: #CCCCCC;
                  left: 50%;
                  top: 50%;
                  margin-left: -10px;
                  margin-top: -10px;
             }
             /* 动画的关键帧 */
             @keyframes rotate {
                  from {
                       transform: rotate(0deg);
                  }

                  to {
                    transform: rotate(360deg);
                  }
             }
        </style>
    </head>
    <body>

             <div class="clock">     <!-- 表面 -->
                <!-- 刻度线 -->
                  <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="h"></div>    <!-- 时针 -->
                  <div class="m"></div>    <!-- 分针 -->
                  <div class="s"></div>    <!-- 秒针 -->

                  <div class="dotted"></div>        <!-- 中间点 -->
             </div>
    </body>
</html>
效果如下：
利用HTML+css制作简易时钟

猜你喜欢
