本帖最后由 加林森 于 2022-5-22 09:23 编辑 <br /><br />马黑黑 发表于 2022-3-6 11:35
挺好挺好
嗯嗯。
<style>
.wrap {
left: -214px;
width: 1024px; height: 767px;
background: teal url('https://pic.imgdb.cn/item/62898fa10947543129b04c31.jpg') no-repeat center/cover;
position: relative;
}
.circle {
display: flex;
justify-content: center;
align-items: center;
width: 80px; height: 80px;
left: 10px; bottom: 10px;
border: solid 6px transparent;
border-radius: 50%;
background-image: radial-gradient(ghostwhite, transparent), linear-gradient(120deg,tomato,green,red,gold);
background-origin: border-box;
background-clip: content-box, border-box;
cursor: pointer;
font: normal 14px sans-serif;
position: absolute;
}
.circle::before { position: absolute; content: attr(data-per); bottom: 20%;}
.circle::after { position: absolute; content: ''; width: 10px; height: 10px; background: olive; border-radius: 50%; }
.hand {
position: absolute; width: 2px; height: 50%;
bottom: 50%; background: rgba(200,20,20,.45);
transform-origin: bottom;
}
.wrap::before {
content: '';
position: absolute;
width: 50%;
height: 50%;
background: url('https://pic.imgdb.cn/item/6235d74f5baa1a80ab9d74a0.gif') no-repeat
center/cover;
opacity: .55;
left:30px; top: 20px;
}
</style>
<div class="wrap">
<div class="circle" data-per="0%">
<div class="hand"></div>
</div>
</div>
<audio id="aud" src="https://www.joy127.com/url/90452.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let circle = document.querySelector('.circle');
let hand = document.querySelector('.hand');
let aud = document.querySelector('#aud');
let current, task;
aud.addEventListener('timeupdate', function(){
task = aud.duration;
current = aud.currentTime;
setProgress(task,current);
});
circle.onclick = () =>{ aud.paused ? aud.play() : aud.pause(); };
function setProgress(tt,cc) {
if(tt <= 0 || cc <= 0) return false;
let prog = 100 * cc / tt;
hand.style.transform = `rotate(${360*prog/100}deg`;
circle.setAttribute('data-per', prog.toFixed(2) + '%');
}
</script>
加林森 发表于 2022-3-6 10:41
听免费的歌曲还是有的，我就不信不让大家娱乐了。
那天汉字也管控起来，那才厉害了呢。
红影 发表于 2022-3-6 12:47
那天汉字也管控起来，那才厉害了呢。
如果把这个也管控起来，大家都整成了无语人了。{:5_117:}
加林森 发表于 2022-3-6 12:53
如果把这个也管控起来，大家都整成了无语人了。
现在管控搞音乐也差不多了。
红影 发表于 2022-3-6 13:04
现在管控搞音乐也差不多了。
就是，只要给钱就行了。我就不给钱也一样听。{:5_117:}