漏刻有时数据可视化大屏常用排版HTML和CSS动画(1)：旋转动画

<div>
    <img class="jzxz1" src="images/jzxz1.png">
    <img class="jzxz2" src="images/orange.png">
</div>

.jzxz1 {
            animation: xz1 8s infinite linear;
        }

        @keyframes xz1 {
            from {
                transform: rotate(0deg);
            }
            50% {
                transform: rotate(180deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        .jzxz2 {
            animation: xz2 7s infinite linear;
        }

        @keyframes xz2 {
            from {
                transform: rotate(0deg);
            }
            50% {
                transform: rotate(-180deg);
            }
            to {
                transform: rotate(-360deg);
            }
        }

Done!