html - CSS:音量 slider 边缘的小旋钮

Question

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

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

Flash Skin

HTML5 Skin

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

我真的需要一些帮助。

音量条码。

<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%;
}