BILIBIBI

CSS3 歌曲封面旋转

在发现这个方法之前,我的封面图一直是用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动画。失误啊,当初看教程感觉这个好像没什么用处就略过了,没想到有这种用处

标签: javascript, css3

已有 3 条评论

  1. Nianzai
    Nianzai

    盯……

    1. 鸭……

      1. Nianzai
        Nianzai

        牛……

添加新评论