小辣椒 发表于 2022-6-23 21:25

情难忘 TO：黑黑&清舟

<style>
.wrap {
      left: -320px;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('https://wj.zp68.com/lxx/yunhua/2022/06/23/001.png') 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><br><br>

小辣椒 发表于 2022-6-23 21:26

@绿叶清舟 会跳舞的清舟和黑黑舞起来

小辣椒 发表于 2022-6-23 21:27

@马黑黑

黑黑这里的你感觉好凶的，清舟会被你拉疼吧{:4_170:}

小辣椒 发表于 2022-6-23 21:28

最近没有时间玩黑黑的视频背景歌词同步，要休息天可以玩，这个图图以前做的，加了个黑黑的播放器按钮快速完成了

小辣椒 发表于 2022-6-23 21:29

感谢岁月的金喇叭粒子效果@走过岁月

小辣椒 发表于 2022-6-23 21:29

这个好像是闽南语的歌曲

马黑黑 发表于 2022-6-23 21:44

小辣椒 发表于 2022-6-23 21:27
@马黑黑

黑黑这里的你感觉好凶的，清舟会被你拉疼吧

我身材有那么好吗{:4_170:}

马黑黑 发表于 2022-6-23 21:45

小辣椒 发表于 2022-6-23 21:26
@绿叶清舟 会跳舞的清舟和黑黑舞起来

其实我只会跳莲花舞{:5_117:}

马黑黑 发表于 2022-6-23 21:45

作品简约大气，出自大师之手

小辣椒 发表于 2022-6-23 21:45

马黑黑 发表于 2022-6-23 21:44
我身材有那么好吗

哦，对了，黑黑一直很谦虚的。那身材。。。。。。{:4_170:}

马黑黑 发表于 2022-6-23 21:46

小辣椒 发表于 2022-6-23 21:45
哦，对了，黑黑一直很谦虚的。那身材。。。。。。

一个字：惨不忍睹

小辣椒 发表于 2022-6-23 21:47

马黑黑 发表于 2022-6-23 21:45
其实我只会跳莲花舞

莲花舞怎么跳{:4_203:}

黑黑讲解一下{:4_173:}

小辣椒 发表于 2022-6-23 21:48

马黑黑 发表于 2022-6-23 21:46
一个字：惨不忍睹

反正谦虚的下场{:4_170:}

马黑黑 发表于 2022-6-23 21:48

小辣椒 发表于 2022-6-23 21:47
莲花舞怎么跳

黑黑讲解一下

莲花舞，就是在一张莲花上跳舞，以前安禄山跳过，跳得很好，我远远比不上

马黑黑 发表于 2022-6-23 21:48

小辣椒 发表于 2022-6-23 21:48
反正谦虚的下场

嗯，谦虚使人发胖

小辣椒 发表于 2022-6-23 21:48

马黑黑 发表于 2022-6-23 21:45
作品简约大气，出自大师之手

岁月的粒子效果漂亮的原因。还有黑黑这个按钮特别的漂亮

马黑黑 发表于 2022-6-23 21:49

小辣椒 发表于 2022-6-23 21:48
岁月的粒子效果漂亮的原因。还有黑黑这个按钮特别的漂亮

这个是最偷懒的按钮

小辣椒 发表于 2022-6-23 21:50

马黑黑 发表于 2022-6-23 21:48
莲花舞，就是在一张莲花上跳舞，以前安禄山跳过，跳得很好，我远远比不上

可惜我真不晓得，还得去补一下课

马黑黑 发表于 2022-6-23 21:50

小辣椒 发表于 2022-6-23 21:50
可惜我真不晓得，还得去补一下课

这是历史

小辣椒 发表于 2022-6-23 21:51

马黑黑 发表于 2022-6-23 21:48
嗯，谦虚使人发胖

我喜欢苗条，所以我从来不谦虚{:4_170:}
页: [1] 2 3 4
查看完整版本: 情难忘 TO：黑黑&清舟