CSS3 歌曲封面旋转

本文发布于 9 年前 ，内容可能和实际情况存在出入。如果文章存在错误欢迎指正，我会根据情况对文章进行修改或做隐藏处理

在发现这个方法之前，我的封面图一直是用JS操作rotate属性实现的

rot = 0;
setInterval(function(){
    if(++rot >= 360){rot = 0;}
    $('#timg').css('transform','rotate('+rot+'deg)');
},100);

又卡又占资源。当时CSS3教程没好好看，觉得这种效果必须要用JS才能实现

昨天在一个音乐插件上看到它的封面旋转很流畅，觉得很好奇，于是就扒开来看

@-webkit-keyframes Circle {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}
@keyframes Circle {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}
.playing{
    -webkit-animation:Circle 20s linear infinite 0s forwards;
    animation:Circle 20s linear infinite 0s forwards;
}
.pause{
    -webkit-animation-play-state:paused;
    animation-play-state:paused;
}

发现用的是animation动画。失误啊，当初看教程感觉这个好像没什么用处就略过了，没想到有这种用处