最近學習了一些 CSS 相關的知識，尤其是實踐如何制作一個簡單的播放器圖標。在這篇文章中，我將分享我的經驗和一些有用的代碼。 首先，讓我們看一下我們要實現的播放器圖標樣式。我們需要一個圓形的圖標，其中包括一個三角形的“播放”圖標和一條薄的進度條。我們使用CSS來繪制這個圖標。

/* 圓形基本樣式 */
.play-btn {
width: 36px;
height: 36px;
margin-right: 10px;
border-radius: 50%;
background-color: #333;
position: relative;
}
/* 播放三角形 */
.play-btn:before {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 8px 0 8px 16px;
border-color: transparent transparent transparent #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 進度條 */
.play-btn:after {
content: '';
width: 28px;
height: 2px;
background-color: #fff;
position: absolute;
bottom: -5px;
left: 50%;
transform: translate(-50%);
}

使用上述代碼，我們已經創建了一個基本的播放器圖標。接下來，我們將添加一些交互效果，使它看起來更自然。

/* 鼠標懸停效果 */
.play-btn:hover {
background-color: #222;
}
/* 點擊播放效果 */
.play-btn.playing:after {
transition: width 1s linear;
width: 100%;
}
/* 播放中狀態 */
.play-btn.playing:before {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 8px 0 8px 16px;
border-color: transparent transparent transparent #333;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(180deg);
}

現在，我們已經添加了懸停效果、點擊播放效果以及播放中狀態。每個效果都比前一個更令人印象深刻，使得我們的播放器圖標更加生動。 希望這篇文章對您有所幫助！