css图片360°自动旋转

        .img {
            width: 100px;
            height: 100px;
            animation: rotate 3s linear infinite;
            border-radius: 50%;
            -webkit-user-drag: none;
        }

        @keyframes rotate {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

<img class="img" src="data:image/webp;base64,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" >

See the Pen 图片旋转 by qianhuiya ( @quinhua) on CodePen.