CSS播放音樂效果是一種常見的網頁功能，它可以為網站增添生動的氣氛和視聽體驗。以下是介紹CSS音樂效果的相關代碼：

/*音樂圖標樣式*/
.music-icon {
position: fixed; 
bottom: 20px; 
right: 20px; 
background-color: white; 
border-radius: 50%; 
width: 50px; 
height: 50px; 
cursor: pointer;
}
/*初始狀態*/
.music-icon:before { 
content: " "; 
position: absolute; 
top: 10px; 
left: 10px; 
border-top: 20px solid transparent; 
border-bottom: 20px solid transparent; 
border-left: 20px solid #333; 
transition: all 0.5s ease;
}
/*播放狀態*/
.music-icon.play:before { 
transform: translateX(20px); 
}
/*音樂播放設置*/
audio {
display: none; 
}
/*點擊播放音樂*/
.music-icon:after {
content: ' '; 
position: absolute; 
width: 20px; 
height: 20px; 
background-color: #333; 
top: 15px; 
left: 16px; 
border-radius: 50%; 
transition: all 0.5s ease; 
transform: scaleY(2);
}
/*控制進度條*/
audio::-webkit-media-controls-timeline {
background-color: #333; 
}
/*控制音量*/
audio::-webkit-media-controls-volume-slider {
background-color: #333; 
}

以上代碼是設置音樂圖標的樣式以及它的初始狀態和播放狀態，同時還設置了控制進度條和音量的樣式。接下來是添加音樂并控制它的相關代碼：

<audio id="audio" src="music.mp3"></audio>
<script>
//獲取音樂圖標元素
var musicIcon = document.querySelector('.music-icon');
//獲取音樂元素
var audio = document.getElementById('audio');
//點擊音樂圖標切換播放狀態
musicIcon.onclick = function(){
if(audio.paused){  //當前為暫停狀態
audio.play();    //播放音樂
this.classList.add('play'); //改變圖標狀態
}
else{   //當前為播放狀態
audio.pause();   //暫停音樂
this.classList.remove('play'); //改變圖標狀態
}
};
</script>

以上代碼是添加一個音樂元素，并使用JavaScript來控制音樂播放和暫停。將以上代碼添加到網頁中，即可實現一個帶有音樂播放效果的頁面。