队长这个边框颜色修改的不错，其实这个网易播放器出来不会滚动的
小辣椒晚上好。{:4_187:}
<style>
.mama {
left: -280px;
width: 1156px;
height: 799px;
background-image: linear-gradient(darkred, transparent), url('/data/attachment/forum/202205/21/191016sjn3enonw11jjvv3.jpg');
background-blend-mode:multiply, normal;
position: relative;
}
.wrap {
display: flex;
justify-content: center;
width: 25px; height: 215px;
bottom: 10px; left: 10px;
background: rgba(255,0,0,.35);
border-radius: 10px;
cursor: pointer;
position: absolute;
}
.drop {
position: absolute;
width:15px;
height: 15px;
border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
transform: rotate(-45deg);
background: darkred;
}
.drop::before{
position: absolute;
content: attr(data-per);
width: 60px; height: 60px;
left: 25px;
background: red;
font: normal 12px / 60px sans-serif;
text-align: center;
color: white;
}
</style>
<div class="mama">
<div class="wrap">
<div class="drop" data-per="0%"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1913099379.mp3" autoplay="autoplay" loop="loop"></audio>
</div>
<script>
let aud = document.querySelector('#aud');
let wrap = document.querySelector('.wrap');
let drop = document.querySelector('.drop');
let task, current;
aud.addEventListener('timeupdate', function(){
task = aud.duration;
current = aud.currentTime;
setProgress(task,current);
});
wrap.onclick = () =>{ aud.paused ? aud.play() : aud.pause(); };
function setProgress(tt,cc) {
if(tt <= 0 || cc <= 0) return false;
let prog = 100 * cc / tt;
drop.style.top = prog * 2 + 'px';
drop.setAttribute('data-per', prog.toFixed(2) + '%');
}
</script>
加林森 发表于 2022-3-3 19:00
这个是介绍里面说的。
太夸张了{:4_173:} 红影 发表于 2022-3-3 21:12
太夸张了
你这样说没人听吧。{:4_189:} 加林森 发表于 2022-3-3 21:29
你这样说没人听吧。
不知道，我只是自己说的，别人怎样想我不知道。 红影 发表于 2022-3-4 10:37
不知道，我只是自己说的，别人怎样想我不知道。
{:4_172:} 欣赏音乐来啦~~{:5_106:} 杨柳青 发表于 2022-3-5 12:34
欣赏音乐来啦~~
嗯嗯，可以的可以的。
页:
1
[2]