大猫咪 发表于 2022-5-20 22:26

拯救

本帖最后由 大猫咪 于 2022-5-21 11:13 编辑 <br /><br /><style>
.wrap {
      left: -300px;top:130px;
        width: 1200px;
        height: 680px;
        background: teal url('https://s3.bmp.ovh/imgs/2022/05/20/3db5e8951aece43f.webp') no-repeat

center/cover;
        position: relative;
      box-shadow:4px 4px 5px #333;
      border-radius:8px;
}
.wrap::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background: url('https://wj.zp68.com/lxx//yunhua/2022/05/19/xue.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: 780px;
        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/6287b31009475431298123bb.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="http://music.163.com/song/media/outer/url?id=145586.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-21 08:34

分享精彩制作！

红影 发表于 2022-5-21 08:50

太漂亮了，这首是孙楠的歌吧，特别喜欢的歌{:4_187:}

红影 发表于 2022-5-21 08:51

画面的意境很好，配上孙楠的高音，让情绪得到了充分的爆发{:4_187:}

梦油 发表于 2022-5-21 09:55

哎呦！太漂亮了。

大猫咪 发表于 2022-5-21 11:24

岩新新 发表于 2022-5-21 08:34
分享精彩制作！

谢谢新新支持鼓励！ 周末快乐！ {:4_187:}{:4_190:}

大猫咪 发表于 2022-5-21 11:28

红影 发表于 2022-5-21 08:50
太漂亮了，这首是孙楠的歌吧，特别喜欢的歌

是的红影找到这张图片，代码有雪花在飘不知道配什么歌， 刚好同事手机在听，感觉挺应景的 {:5_117:}

大猫咪 发表于 2022-5-21 11:30

梦油 发表于 2022-5-21 09:55
哎呦！太漂亮了。

谢谢梦油兄支持鼓励 {:4_187:}周末快乐！{:4_190:}

大猫咪 发表于 2022-5-21 11:34

红影 发表于 2022-5-21 08:51
画面的意境很好，配上孙楠的高音，让情绪得到了充分的爆发

也挺喜欢这歌的   用辣椒送你的代码制作的{:5_106:}   红影周末快乐！{:4_204:}

小辣椒 发表于 2022-5-21 12:12

èè{:4_178:}

小辣椒 发表于 2022-5-21 12:14

猫猫我哭，写了一大篇幅的字，发出来没有了

大猫咪 发表于 2022-5-21 12:14

小辣椒 发表于 2022-5-21 12:12
èè

哈哈   辣椒来了 {:4_187:}   周末快乐！ 辛苦啦{:4_179:}

大猫咪 发表于 2022-5-21 12:16

小辣椒 发表于 2022-5-21 12:14
猫猫我哭，写了一大篇幅的字，发出来没有了

是不是用手机上的啊   {:4_204:}{:4_190:}

小辣椒 发表于 2022-5-21 12:17

大猫咪 发表于 2022-5-21 12:14
哈哈   辣椒来了    周末快乐！ 辛苦啦

猫猫现在我还没有起来。。.。{:4_189:}
谢谢猫猫，

大猫咪 发表于 2022-5-21 12:22

小辣椒 发表于 2022-5-21 12:17
猫猫现在我还没有起来。。.。
谢谢猫猫，

嗯嗯   中午好好休息下 ，下午继续锻炼， 天天坚持 ， {:4_187:}{:4_179:}

闲言不语 发表于 2022-5-21 14:46

哎哟喂，猫猫这帖创意很好！

闲言不语 发表于 2022-5-21 14:48

声音开大了，打开吓俺一跳，貌似很能嚎！

闲言不语 发表于 2022-5-21 14:50

小辣椒 发表于 2022-5-21 12:14
猫猫我哭，写了一大篇幅的字，发出来没有了

要纸巾否，让猫咪送{:4_189:}

梦油 发表于 2022-5-21 14:58

大猫咪 发表于 2022-5-21 11:30
谢谢梦油兄支持鼓励   周末快乐！

希望经常欣赏大猫咪朋友的佳作。

大猫咪 发表于 2022-5-21 15:01

闲言不语 发表于 2022-5-21 14:46
哎哟喂，猫猫这帖创意很好！

不语兄来了 {:4_170:}周末快乐！{:4_190:}
页: [1] 2 3 4
查看完整版本: 拯救