配有音樂 CSS 是一種可以為你的網頁添加音樂的 CSS 樣式。使用這種樣式，你可以為你的網頁設置背景音樂，從而增強網頁的氛圍。為了使用這種樣式，你需要先引入一個帶有音樂的 HTML5 元素，然后使用 CSS 來控制音樂的播放。下面就是一個使用配有音樂 CSS 的示例：

<audio src="music.mp3" autoplay loop></audio>
<style>
body {
background-color: #333;
}
audio {
display: none;
}
::after {
content: url(music.png);
cursor: pointer;
position: absolute;
top: 10px;
right: 10px;
}
::after:hover {
content: url(music.gif);
}
::after:active {
content: url(music.gif);
}
::after:not(:hover) {
animation: rotate 2s linear infinite;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
::after {
animation: opacity 2s linear infinite;
}
@keyframes opacity {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
::before {
content: "Music On";
cursor: pointer;
position: absolute;
top: 60px;
right: -30px;
width: 100px;
font-size: 20px;
text-align: center;
transform: rotate(-90deg);
}
audio:not([autoplay]) + ::before {
content: "Music Off";
}

上述代碼實現了一個旋轉的音樂圖標，鼠標懸停時會切換到一個動態的音樂圖標，點擊后開始播放音樂，再次點擊則停止播放音樂。如果想要自行替換圖標，只需要將 img 標簽中的 music.png 和 music.gif 替換成你需要的圖片路徑即可。