如何实现音乐光碟旋转的效果

.content image{
    width: 300rpx;
    height: 300rpx;
    border-radius: 50%;
    border: 100rpx solid rgb(46, 46, 46);
    box-shadow: 0 0 50rpx rgb(204, 202, 202);
    animation: imgplay 20s linear infinite;

}

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

分开讲解：

  实现光碟的效果

代码： 

    width: 300rpx;
    height: 300rpx;
    border-radius: 50%;
    border: 100rpx solid rgb(46, 46, 46);

效果：

 

 让它旋转起来，需要加动画

 

    animation: imgplay 20s linear infinite;

这行代码是一个 CSS 动画的样式规则，用于给元素添加一个名为 "imgplay" 的动画效果。让我们逐个解释这行代码的各个部分：

<