宁静 发表于 2022-10-24 15:22

单曲欣赏---微风

<style>
.wrap {
      left: -200px;top:150px;
        width: 1276px;
        height: 650px;
        background: teal url('https://wx.ttt.dj/updir/62d4283186dd7.gif') no-repeat

center/cover;
        position: relative;
      box-shadow:4px 4px 5px #333;
      border-radius:8px;
}
.wrap::before {
      content: '';
      position: absolute;
      width: 60%;
      height: 60%;
      background: url(' ') 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: 540px;
        top: 140px;
        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://wx.ttt.dj/updir/62d427cecf1c0.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://wx.ttt.dj/updir/62d428bb180b0.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-10-24 15:24

纯欣赏歌曲吧{:9019:}

宁静 发表于 2022-10-24 15:32

这个css播放器，简洁，但运用合理整体效果不会差。

小沫 发表于 2022-10-24 16:58

沙发听歌，宁静晚上好{:9001:}

一抹微蓝 发表于 2022-10-24 17:00

鸟，花儿，风吹叶，好美，歌好听，这播放器也好看{:10_402:}

一抹微蓝 发表于 2022-10-24 17:00

问好静{:10_401:}

撒哈拉的雨 发表于 2022-10-24 17:19

这个播放器漂亮，微风这首歌第一次听

撒哈拉的雨 发表于 2022-10-24 17:20

小沫 发表于 2022-10-24 16:58
沙发听歌，宁静晚上好

小沫现在已经是晚上了啊

撒哈拉的雨 发表于 2022-10-24 17:21

一抹微蓝 发表于 2022-10-24 17:00
鸟，花儿，风吹叶，好美，歌好听，这播放器也好看

问好微蓝，一起欣赏{:10_402:}

撒哈拉的雨 发表于 2022-10-24 17:37

混个运气{:9001:}
页: [1] 2 3 4
查看完整版本: 单曲欣赏---微风