加林森 发表于 2022-5-25 21:18

《最浪漫的事》- 金志文


<style>
.wrap {
      left: -302px;top:150px;
        width: 1200px;
        height: 675px;
        background: teal url('https://pic.imgdb.cn/item/628e299b0947543129bd64f4.jpg') no-repeat

center/cover;
        position: relative;
      box-shadow:4px 4px 5px #333;
      border-radius:8px;
}
.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:60px; top: 20px;
}
.progress {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 155px;
        height: 155px;
        left: 980px;
        top: 260px;
        border-radius: 50%;
        background: conic-gradient(from 180deg,#29ab7c0%,#e4f6f9 0%);
        cursor: pointer;
}

.progress::before {
        position: absolute;
        content: attr(data-per);
        width: 135px;
        height: 135px;
        border-radius: 50%;
        background: #F0FFFF url('https://pic.imgdb.cn/item/628e2ba60947543129c05e37.jpg');
        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://www.joy127.com/url/90487.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><br><br><br><br><br><br>

小满 发表于 2022-5-25 21:22

又捡个沙发~

小满 发表于 2022-5-25 21:23

听听~

加林森 发表于 2022-5-25 21:23

小满 发表于 2022-5-25 21:22
又捡个沙发~

欢迎━(*｀∀′*)ノ亻!小满！

加林森 发表于 2022-5-25 21:24

小满 发表于 2022-5-25 21:23
听听~

可以听的。

马黑黑 发表于 2022-5-25 21:25

队长的作品，高产又高质量

加林森 发表于 2022-5-25 21:27

马黑黑 发表于 2022-5-25 21:25
队长的作品，高产又高质量

谢谢老黑。今天不发了，就听歌了。

马黑黑 发表于 2022-5-25 21:27

加林森 发表于 2022-5-25 21:27
谢谢老黑。今天不发了，就听歌了。

嗯，该好好欣赏一下劳动成果了

加林森 发表于 2022-5-25 21:28

马黑黑 发表于 2022-5-25 21:27
嗯，该好好欣赏一下劳动成果了

就是就是。

马黑黑 发表于 2022-5-25 21:30

加林森 发表于 2022-5-25 21:28
就是就是。

{:4_190:}

加林森 发表于 2022-5-25 21:33

马黑黑 发表于 2022-5-25 21:30


{:4_191:}

马黑黑 发表于 2022-5-25 21:35

加林森 发表于 2022-5-25 21:33


喝起

加林森 发表于 2022-5-25 22:00

干杯

醉美水芙蓉 发表于 2022-5-25 22:07

加林森 发表于 2022-5-25 22:10

醉美水芙蓉 发表于 2022-5-25 22:07
欣赏队长精美作品！好听的歌曲！

嗯嗯，是的。

红影 发表于 2022-5-25 22:12

这画面真浪漫，和歌曲很相配。欣赏队长好帖{:4_187:}

加林森 发表于 2022-5-25 22:15

红影 发表于 2022-5-25 22:12
这画面真浪漫，和歌曲很相配。欣赏队长好帖

我现在用的是手机在回帖，谢谢！

红影 发表于 2022-5-26 19:08

加林森 发表于 2022-5-25 22:15
我现在用的是手机在回帖，谢谢！

我昨天有点累，下得早，不好意思。

加林森 发表于 2022-5-26 19:09

红影 发表于 2022-5-26 19:08
我昨天有点累，下得早，不好意思。

没关系的啊。
页: [1]
查看完整版本: 《最浪漫的事》- 金志文