CSS：音量滑块边缘的小旋钮

Question

我正在使用 FlowPlayer 播放流。多年来，我们决定放弃我们的 Flash 播放器，转而使用 HTML5。

我面临的问题是新的 HTML5 皮肤应该看起来像 flash 的皮肤。

剩下要做的就是复制音量滑块右边缘的那个小旋钮（圆形）。我一直在尝试创建一个元素并使其随音量条移动，但没有任何效果。

我真的需要一些帮助。

音量条码。

<div class="fp-volumeslider">
<div class="fp-volumelevel animated" style="transition-duration: 0ms; width: 72%;">

每次用户滑动音量条时都会设置 fp-volumelevel 动画宽度。

Answer 1

我认为这对你有用：

.fp-volumelevel.animated{
    position:relative;
}

.fp-volumelevel.animated::after {
    content: "";
    position: absolute;
    right: 0;
    top: -2px;
    border: solid 6px #fff;
    border-radius: 50%;
}

CSS：音量滑块边缘的小旋钮

CSS: Small knob on the edge of a volume slider

html

css

flowplayer