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

/* 圓形基本樣式 */
.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%);
}
/* 進(jìn)度條 */
.play-btn:after {
content: '';
width: 28px;
height: 2px;
background-color: #fff;
position: absolute;
bottom: -5px;
left: 50%;
transform: translate(-50%);
}

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

/* 鼠標(biāo)懸停效果 */
.play-btn:hover {
background-color: #222;
}
/* 點(diǎn)擊播放效果 */
.play-btn.playing:after {
transition: width 1s linear;
width: 100%;
}
/* 播放中狀態(tài) */
.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);
}

現(xiàn)在，我們已經(jīng)添加了懸停效果、點(diǎn)擊播放效果以及播放中狀態(tài)。每個效果都比前一個更令人印象深刻，使得我們的播放器圖標(biāo)更加生動。 希望這篇文章對您有所幫助！