CD旋转样式

rotate.css

.box {
    width: 100px;
    height: 100px;
    border: 1px #111 solid;
    position: relative;
    transition: background-color 1s ease;
    transition: width 1s ease;
    animation-name: mymove;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-delay: 1000ms;
    animation-iteration-count: infinite;
    animation-play-state: running;
    animation-direction: normal;
}

@keyframes mymove {
    0% {
        transform: rotate(0deg);
    }
    10% {
        transform: rotate(36deg);
    }
    20% {
        transform: rotate(72deg);
    }
    30% {
        transform: rotate(108deg);
    }
    40% {
        transform: rotate(144deg);
    }
    50% {
        transform: rotate(180deg);
    }
    60% {
        transform: rotate(216deg);
    }
    70% {
        transform: rotate(252deg);
    }
    80% {
        transform: rotate(288deg);
    }
    90% {
        transform: rotate(324deg);
    }
    100% {
        transform: rotate(360deg);
    }
}