CSS png animation旋转loading和gif loading的向下兼容实现实例页面

CSS代码：

.box {
    width: 100px; height: 100px;
    background: url(loading_blue.gif) no-repeat center;
    background: url(loading_blue.png) no-repeat center, linear-gradient(to top, transparent, transparent);
    animation: spin 1s linear infinite;
}
@keyframes spin{
    from {
        transform:rotate(0);
    }
    to {
        transform:rotate(-360deg);
    }
}

HTML代码：

<div class="box"></div>