使用宽度计算角度6动态设置CSS属性left
使用宽度计算角度6动态设置CSS属性left
提问于 2018-06-10 03:08:31
我目前正在构建一个CSS音频播放器，我正在设置div的宽度来表示音频的当前进度，使用如下样式，效果非常好：
<div class="player-progress-current" [style.width.%]="(currentTime * 100)/duration"></div>我还想通过设置另一个类的'left‘CSS属性在上面的进度div的末尾画一个小圆圈。这应该是英文的：
(Parent Width px) - (Progress Width px)我试过使用calc()函数，但它不喜欢它，并且计算的百分比不知道使用我认为的宽度……
<div class="player-progress-handle" [style.left.px]="calc(100% - (currentTime * 100)/duration"></div>CSS类包括：
.player-progress-current {
width: 100%;
height: 1px;
background-color: red;
}
.player-progress-handle {
position: relative;
bottom: 1px;
border: 1px solid #f50;
border-radius: 100%;
height: 8px;
width: 8px;
background-color: #f50;
box-sizing: border-box;
margin-top: -4px;
margin-left: -4px;
}你知道最好的方法是什么吗？我相信我能找到一条捷径，但我希望能找到正确的路。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-10 03:50:37
您可以使用:after作为句柄，并摆脱计算：
.player-progress-current {
position: relative;
width: 50%;
height: 1px;
margin: 20px 0;
background: red;
}
.player-progress-current:after {
content: '';
position: absolute;
right:-3px; bottom: 1px;
border: 1px solid #f50;
border-radius: 55%;
height: 8px;
width: 8px;
background-color: #f50;
box-sizing: border-box;
}<div class="player-progress-current" [style.width.%]="(currentTime * 100)/duration"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50777611
复制相关文章
相似问题
腾讯云开发者
