在音樂播放器網(wǎng)站的設(shè)計中，常常會使用到黑膠動畫來增加頁面的趣味性。而使用 CSS 動畫實現(xiàn)黑膠動畫效果也非常簡單。

首先，我們需要準(zhǔn)備好黑膠的圖片以及唱片在不同位置時的圖片。可以使用 Photoshop 等工具自己制作或者搜索下載。

然后，在 CSS 中定義動畫。在這個例子中，我們將使用@keyframes修改位置以及旋轉(zhuǎn)度數(shù)來創(chuàng)建動態(tài)效果。

@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes move {
0% {
background-position: center bottom;
}
50% {
background-position: center center;
}
100% {
background-position: center top;
}
}

接下來，我們將這些動畫應(yīng)用到唱片和黑膠上。

.record {
animation: spin 4s infinite linear;
}
.vinyl {
animation: move 4s infinite linear;
}

最后，在 HTML 中添加相應(yīng)的標(biāo)簽。

<div class="black-vinyl">
<div class="record"></div>
<div class="vinyl"></div>
</div>

這樣，我們就成功地為網(wǎng)頁添加了一個簡單而有趣的黑膠動畫。