加林森 发表于 2022-1-3 20:11

本帖最后由 加林森 于 2022-5-20 18:33 编辑 <br /><br />红影 发表于 2022-1-3 20:03
这个就是运用了图片修饰功能吧，真漂亮，谢谢队长的美好祝福
应该的应该的。

<style>
.wrap {
      left: -422px;top:150px;
        width: 1440px;
        height: 737px;
        background: teal url('https://pic.imgdb.cn/item/6287653d0947543129505aff.jpg') 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://pic.imgdb.cn/item/62876b0c094754312955e870.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://wj.zp68.com/lxx//yunhua/2022/05/19/x.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://music.163.com/song/media/outer/url?id=1845732406.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-1-3 20:11

隊長的帖子做得好漂亮啊~{:4_204:}

加林森 发表于 2022-1-3 20:14

朵嫣 发表于 2022-1-3 20:11
隊長的帖子做得好漂亮啊~

谢谢朵嫣支持！{:4_171:}

马黑黑 发表于 2022-1-3 20:18

{:4_181:}

加林森 发表于 2022-1-3 20:42

马黑黑 发表于 2022-1-3 20:18


帮忙看看啊。

马黑黑 发表于 2022-1-3 21:03

加林森 发表于 2022-1-3 20:42
帮忙看看啊。

这个很麻烦，你不单单用我的代码

大猫咪 发表于 2022-1-3 21:04

和队长一起祝福！经典，非常好听

{:4_179:}{:4_190:}

加林森 发表于 2022-1-3 21:04

马黑黑 发表于 2022-1-3 21:03
这个很麻烦，你不单单用我的代码

是的啊

加林森 发表于 2022-1-3 21:05

大猫咪 发表于 2022-1-3 21:04
和队长一起祝福！经典，非常好听

猫猫开心就好啊！{:4_179:}{:4_190:}

马黑黑 发表于 2022-1-3 21:05

加林森 发表于 2022-1-3 21:04
是的啊

代碼被系統吞掉我是很难看出端倪的

大猫咪 发表于 2022-1-3 21:07

加林森 发表于 2022-1-3 21:05
猫猫开心就好啊！

{:4_179:}和队长一起开心

加林森 发表于 2022-1-3 21:07

马黑黑 发表于 2022-1-3 21:05
代碼被系統吞掉我是很难看出端倪的

啊？？？？？？？？？？怎么办？{:5_153:}

加林森 发表于 2022-1-3 21:11

大猫咪 发表于 2022-1-3 21:07
和队长一起开心

好的好的{:4_179:}

杨柳青 发表于 2022-1-3 22:09

加林森 发表于 2022-1-3 19:07
好听不？

你说呢~~{:5_109:}

马黑黑 发表于 2022-1-3 22:15

加林森 发表于 2022-1-3 21:07
啊？？？？？？？？？？怎么办？

不是么？看不出前前后后

红影 发表于 2022-1-3 22:20

加林森 发表于 2022-1-3 20:11
应该的应该的。

这个帖子好棒{:4_204:}

加林森 发表于 2022-1-3 22:40

马黑黑 发表于 2022-1-3 22:15
不是么？看不出前前后后

我自己再去用研究研究

加林森 发表于 2022-1-3 22:41

红影 发表于 2022-1-3 22:20
这个帖子好棒

谢谢红影支持！我继续研究去。

马黑黑 发表于 2022-1-3 22:41

加林森 发表于 2022-1-3 22:40
我自己再去用研究研究

嗯，看你自己的代码，一步一步来

加林森 发表于 2022-1-3 22:45

杨柳青 发表于 2022-1-3 22:09
你说呢~~

真乖
页: 1 [2] 3
查看完整版本: 祝福花潮论坛！《永远和你》 NOT.ZAM （水区）