css3实现加载小动画

HTML:

CSS:

body {
            background-color: #59488b;
        }
        .box {
            position: relative;
            margin-top: 100px;
            margin-left: 100px;
            width: 30px;
            height: 30px;
            border: 2px solid #fff;
            border-radius: 50%;
        }
        .box:before {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            width: 10px;
            height: 2px;
            background-color: #fff;
            transform-origin: 1px 1px;
            animation: mymove linear 5s infinite;
        }
        .box:after {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            width: 15px;
            height: 2px;
            background-color: #fff;
            transform-origin: 1px 1px;
            animation: mymove linear 2s infinite;
        }

        @keyframes mymove
        {
            0%{-webkit-transform:rotate(0deg)}
            100%{-webkit-transform:rotate(360deg)}
        }

利用两伪元素作为分针时针（当然你说秒针分针也行，哈哈），用定位调整好位置。自定义keyframes动画，0%0度，100%360度。然后在animation中调用keyframes动画。两指针速度设置不一样（时间不一致），都无限循环。还有一点设置好变形起点，否则是已中心点进行旋转的。