宁静 发表于 2023-4-20 23:56

情难忘 --探戈


<style>
.wrap {
      left: -190px;top:150px;
        width: 1238px;
        height: 680px;
        background: teal url('https://wj.zp68.com/lxx/yunhua/2022/06/23/dIF.gif') no-repeat

center/cover;
        position: relative;
      box-shadow:4px 4px 5px #333;
      border-radius:8px;
}
.wrap::before {
      content: '';
      position: absolute;
      width: 205px;;
      height: 46px;
      background: url('') no-repeat

center/cover;
      opacity: .85;
      left:300px; top: 140px;
}
.progress {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 155px;
        height: 155px;
        left: 980px;
        top: 420px;
        border-radius: 50%;
        background: conic-gradient(from 180deg,#29ab7c 0%,#e4f6f9 0%);
        cursor: pointer;
}

.progress::before {
        position: absolute;
        content: attr(data-per);
        width: 135px;
        height: 135px;
        border-radius: 50%;
        background: #F0FFFF url('https://wj.zp68.com/lxx/yunhua/2022/06/23/x0F.gif');
        text-align: center;
        font: normal 26px / 135px sans-serif;
}
</style>

<div class="wrap">
        <div class="progress" data-per="0%"></div>
        <audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2022/06/23/qnw.mp3" loop="loop"
autoplay="autoplay"></audio>
</div><br><br><br><br><br><br>

<script>

let progress = document.querySelector('.progress');
let aud = document.querySelector('#aud');
let current, task;

aud.addEventListener('timeupdate', function(){
        task = aud.duration;
        current = aud.currentTime;
        setProgress(task,current);
});

progress.onclick = () =>{
        aud.paused ? aud.play() : aud.pause();
};

function setProgress(tt,cc) {
        if(tt <= 0 || cc <= 0) return false;
        let prog = 100 * cc / tt;
        progress.style.background = `conic-gradient(from 180deg,#29ab7c ${prog}%,#e4f6f9 ${prog}%)`;
        progress.setAttribute('data-per', prog.toFixed() + '%');
}

</script>
<br><br><br><br>

宁静 发表于 2023-4-20 23:58

今天确实有点迟了，答应早睡的，明天一定早睡@撒哈拉的雨

撒哈拉的雨 发表于 2023-4-21 07:52

坐上沙发了。。。

撒哈拉的雨 发表于 2023-4-21 07:54

宁静 发表于 2023-4-20 23:58
今天确实有点迟了，答应早睡的，明天一定早睡@撒哈拉的雨

你自己的身体自己当心，晚上开始大风降温了，你照顾好自己

撒哈拉的雨 发表于 2023-4-21 07:55

宁静出品，必属精品{:7_283:}

墨羽 发表于 2023-4-21 08:59

探戈一直很优美，右下角那个百分比进度好像很慢！

沉默 发表于 2023-4-21 20:23

宁静 发表于 2023-4-20 23:58
今天确实有点迟了，答应早睡的，明天一定早睡@撒哈拉的雨

昨天我早睡了{:9001:}


没有第一个冲进来

沉默 发表于 2023-4-21 20:24

都快12点了，确实有点迟了

沉默 发表于 2023-4-21 20:29

看见坛主有送你歌
最后一个任务完成

一抹微蓝 发表于 2023-4-21 20:56

静周末愉快，休息的日子可以来跳上一曲了，{:10_402:}
页: [1] 2 3
查看完整版本: 情难忘 --探戈