CSS可以實現很多有趣的效果，比如唱片動畫就是一種很常見的動畫效果。在CSS中，通過旋轉、變形和動畫等屬性，可以讓一個圓形的唱片在屏幕上以一種玩味十足的方式運動

.disk {
width: 150px;
height: 150px;
border-radius: 50%;
border: 10px solid #333;
position: relative;
animation: rotate 10s linear infinite;
}
.disk:before, .disk:after {
content: '';
width: 20px;
height: 20px;
background-color: #333;
border-radius: 50%;
position: absolute;
top: 50%;
margin-top: -10px;
}
.disk:before {
left: 20px;
}
.disk:after {
right: 20px;
}
.disk .cover {
width: 80px;
height: 80px;
background-color: #fff;
border: 5px solid #333;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.disk .label {
width: 20px;
height: 40px;
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
box-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}

通過上面的CSS代碼，我們可以看到唱片動畫是通過修改.circle這個類的樣式實現的。其中，animation屬性定義了一個名為rotate的關鍵幀動畫，這個動畫會使整個唱片沿著中心點旋轉360度，只不過這個過程持續了10秒。除了旋轉之外，我們還需要定義唱片的其他樣式，包括描邊、封面、標簽等，這些樣式都可以根據自己的需要進行調整。