css3 h5时钟时针

CSS3 H5时钟时针的用法

        /*设置指针的旋转*/        .hour {
              transform: rotate(30deg);
              transform-origin: 50% 50%;
        }
        .minute {
              transform: rotate(180deg);
              transform-origin: 50% 50%;
        }
        .second {
              transform: rotate(270deg);
              transform-origin: 50% 50%;
        }
        /*设置动画*/        .hour {
              animation: hour 43200s infinite;
        }
        .minute {
              animation: minute 3600s infinite;
        }
        .second {
              animation: second 60s infinite;
        }
        /*动画关键帧*/        @keyframes hour {
          from {
                transform: rotate(0deg);
          }
          to {
                transform: rotate(360deg);
          }
        }
        @keyframes minute {
          from {
                transform: rotate(0deg);
          }
          to {
                transform: rotate(360deg);
          }
        }
        @keyframes second {
          from {
                transform: rotate(0deg);
          }
          to {
                transform: rotate(360deg);
          }
        }
    

以上就是CSS3 H5时钟时针的设置方法。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！