在網頁開發中，有時候需要給用戶提供音樂播放的功能。而使用CSS可以使瀏覽器在點擊某個元素時觸發音樂播放。下面來看一下如何使用CSS實現點擊播放音樂的效果。

/*定義一個擁有背景圖片的按鈕*/
.play-btn {
width: 50px;
height: 50px;
background: url('play.png') no-repeat;
cursor: pointer;
}
/*在點擊按鈕時觸發音樂播放*/
.play-btn:active {
background-image: url('pause.png');
}
.play-btn:active ~ audio {
display: inline-block;
}
/*隱藏音樂控件*/
audio {
display: none;
}

首先，我們需要定義一個按鈕元素，并為其設置背景圖片。這里我們使用了class名為.play-btn的元素。接著，為了讓用戶點擊按鈕時觸發音樂播放，我們在該元素的:active偽類下設置新的背景圖片，并添加一個 ~ 相鄰兄弟選擇器來選擇與按鈕后一個兄弟元素（即音樂控件的標簽）同時出現的元素。當按鈕被點擊時，就可以根據 ~ 相鄰兄弟選擇器的規則，將音樂控件的display屬性設置為inline-block，從而使其顯示在頁面上。

另外，需要注意的是，我們需要在CSS中將音樂控件的display屬性設置為none，這樣初始時它就會隱藏在頁面中，等待被觸發并顯示出來。

通過以上的CSS代碼，就可以簡單地實現點擊播放音樂的效果，給用戶帶來更好的音樂體驗。