问好队长，中午好
红影中午好。{:4_187:}
<style>
.wrap {
left: -20px;
width: 800px; height: 463px;
background: teal url('https://pic.imgdb.cn/item/6288afb4094754312921637b.jpg') no-repeat center/cover;
position: relative;
}
.mama {
width: 800px;
height: 600px;
background-color: teal;
background-image: linear-gradient(gray 5%, transparent, lightseagreen),
radial-gradient(circle at 20% 20%, yellow, gold);
}
.mama img {
position: absolute;
width: 200px;
border-radius: 50%;
transform: translate(610px, 100px);
}
.circle {
top: 10px; left: 10px;
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 80px;
border: 10px solid #5d513c;
border-radius: 50%;
background: linear-gradient(45deg, #ccc, #fff);
cursor: pointer;
position: relative;
}
.circle::before, .circle::after { position: absolute; content: ''; }
.circle::before { font: normal 14px sans-serif; content: attr(data-per); }
.circle::after {
width: 10px;
height: 10px;
border-radius: 50%;
background: #eee;
right: -10px;
}
.ball {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #eee;
background-image: radial-gradient(#fff, transparent);
}
@keyframes rot {
from {transform: rotate(-90deg) translate(105px); }
to { transform: rotate(270deg) translate(105px); }
}
</style>
<div class="mama">
<audio id="aud" src="https://www.joy127.com/url/90447.mp3" autoplay="autoplay" loop="loop"></audio>
<div class="circle" data-per="0%">
<div class="ball"></div>
<img src="https://pic.imgdb.cn/item/6288b3eb094754312924cc75.jpg" alt="" />
</div>
</div>
<script>
let task, current;
let aud = document.querySelector('#aud');
let circle = document.querySelector('.circle');
let ball = document.querySelector('.ball');
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;
ball.style.transform = `rotate(${360*prog/100}deg) translate(45px)`;
circle.setAttribute('data-per', prog.toFixed(2) + '%');
}
</script>
页:
1
[2]