CSS是前端開發中非常重要的一項技術，能夠實現頁面的美化和交互效果。使用CSS還可以為網頁添加音樂和音效，使頁面更加動感和生動。下面我們就來介紹一下如何用CSS加上音樂吧。

/* 定義音樂樣式 */
.music {
display: none; /* 隱藏音樂控件 */
}
.music:hover {
display: block; /* 鼠標懸停時顯示音樂控件 */
}
/* 定義音樂控件樣式 */
.audio-player {
margin: 0 auto;
width: 200px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #fff;
border: 1px solid #ddd;
cursor: pointer;
}
/* 音樂控件圖標 */
.audio-player:before {
content: '\f001';
font-family: 'FontAwesome';
font-size: 24px;
color: #666;
}
/* 音樂播放器 */
audio {
display: none; /* 隱藏音樂播放器 */
}
/* 當音樂控件被點擊時顯示音樂播放器 */
.music:hover + audio {
display: block;
}

通過上面的CSS代碼，我們定義了音樂樣式、音樂控件樣式和音樂播放器樣式。在html中，我們需要添加一個音樂控件和一個音樂播放器：

其中，音樂控件被定義為一個帶有.audio-player類的div元素。我們在CSS中設置了:hover偽類，當鼠標懸浮時會顯示該控件。點擊該控件時，會將音樂播放器顯示出來。

音樂播放器使用了HTML5的audio標簽，通過src屬性指定了音樂文件的URL，通過controls屬性顯示出音樂控制按鈕。

除了用CSS為網頁添加音樂，我們還可以使用JavaScript和jQuery等技術來實現更加復雜的音樂效果。希望本文能夠給大家帶來幫助。