網頁音樂播放器是一種常用的網頁媒體播放器，它允許用戶在線播放音樂。本文將介紹如何使用 CSS 編寫一個網頁音樂播放器。
HTML 代碼：
```html
<!DOCTYPE html>
<html>
<head>
<title>Web Music Player CSS Example</title>
<style>
.music {
position: relative;
width: 100%;
height: 300px;
margin: 0 auto;
overflow: hidden;
.music:before,
.music:after {
position: absolute;
content: "";
left: 50%;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 75px solid green;
transform: translateX(-50%);
.music:after {
left: 0;
width: 50px;
height: 0;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
border-bottom: 45px solid green;
transform: translateX(-45%);
.music .play {
position: absolute;
top: 10px;
right: 10px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #007bff;
cursor: pointer;
.music .play:hover {
background-color: #0056b3;
.music .pause {
position: absolute;
top: 20px;
right: 10px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #007bff;
cursor: pointer;
.music .pause:hover {
background-color: #0056b3;
.music .next {
position: absolute;
top: 30px;
right: 10px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #007bff;
cursor: pointer;
.music .next:hover {
background-color: #0056b3;
</style>
</head>
<body>
<div class="music"></div>
</body>
</html>
CSS 代碼說明：
- 使用了 `position: relative` 將音樂播放器的父元素設置為相對定位；
- 使用 `overflow: hidden` 隱藏了播放器的內邊距，這樣用戶才能看到播放器；
- 為音樂播放器添加了一個 `border-radius`，這樣當用戶鼠標懸停在播放器上時，可以形成圓形的音樂播放按鈕；
- 使用 `transform: translateX(-50%);` 將播放器向右移動 50% 的位置，當鼠標懸停在播放器上時，播放器會向右移動；
- 添加了兩個按鈕 `.play` 和 `.pause`，當用戶點擊 `.play` 按鈕時，播放器會播放音樂，當用戶點擊 `.pause` 按鈕時，播放器會暫停音樂；
- 使用 `:hover` 偽類實現了鼠標懸停在播放器上的播放和暫停效果。
使用以上代碼，用戶可以在網頁上在線播放音樂。