CSS背景音樂的播放按鈕是讓網頁更加豐富的一種元素,如果你想為你的網站添加背景音樂播放按鈕,這篇文章會為你提供一些幫助。
/* 定義播放按鈕樣式 */ .play-button { width: 50px; height: 50px; background-color: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; } .play-button::before { content: ""; display: inline-block; border-style: solid; border-width: 0 15px 0 0; border-color: transparent; /* 使用 Unicode 字符 \25B6 表示播放符號 */ padding: 0 10px; font-size: 1.5em; font-family: "Font Awesome 5 Free"; font-weight: 900; speak: none; } /* 定義播放按鈕懸停樣式 */ .play-button:hover { background-color: #f4f4f4; } .play-button:hover::before { /* 控制播放符號在懸停時的顏色 */ color: #1d1d1d; } /* 定義暫停按鈕樣式 */ .pause-button { width: 50px; height: 50px; background-color: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; } .pause-button::before { content: ""; display: inline-block; /* 使用 Unicode 字符 \23F8 表示暫停符號 */ font-size: 1.5em; font-family: "Font Awesome 5 Free"; padding: 0 10px; font-weight: 900; speak: none; } /* 定義暫停按鈕懸停樣式 */ .pause-button:hover { background-color: #f4f4f4; } .pause-button:hover::before { /* 控制暫停符號在懸停時的顏色 */ color: #1d1d1d; }
以上代碼為CSS代碼,其中定義了播放按鈕和暫停按鈕樣式,播放按鈕使用“\25B6”符號,暫停按鈕使用“\23F8”符號,可根據需求自定義修改。通過使用:hover偽類控制懸停樣式,可以讓播放按鈕和暫停按鈕變得更加動態。使用這些代碼可以很方便地在網頁中添加播放音樂的功能。