红影 发表于 2022-5-20 13:18

玻璃心


<style>
.wrap {
      left: -302px;top:120px;
        width: 1200px;
        height: 640px;
        background: teal url('https://pic.imgdb.cn/item/628715ed09475431291d7072.jpg') 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('https://pic.imgdb.cn/item/61b2bf402ab3f51d9144a074.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: 160px;
        border-radius: 50%;
        background: conic-gradient(from 180deg,#FFD700 0%,#FFE4C4 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/628718d709475431292036e9.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=319196.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,#FFD700 ${prog}%,#FFE4C4 ${prog}%)`;
        progress.setAttribute('data-per', prog.toFixed() + '%');
}

</script>

红影 发表于 2022-5-20 13:19

学习一下黑黑的圆环进度按钮，感谢黑黑的代码@马黑黑{:4_187:}

红影 发表于 2022-5-20 13:20

圆环当中用了图片，空间太小了，所以把小数点拿掉了{:4_173:}

小辣椒 发表于 2022-5-20 13:22

亲爱的，速度快的，这个图图配合的非常漂亮，按钮音标小图特别的美{:4_199:}

顾-念 发表于 2022-5-20 13:59

不能穿好看的衣服出门，是玻璃心了。

图文艺，好看

梦油 发表于 2022-5-20 14:12

红影朋友下午好！那纷纷扬扬的落叶效果制造了很好的意境。外行看热闹。

岩新新 发表于 2022-5-20 15:28

分享精彩制作！

四海八荒 发表于 2022-5-20 16:10

很老的歌了！
{:4_204:}

闲言不语 发表于 2022-5-20 16:50

发现影子闭关后的音画水平越来越高了！{:4_199:}

闲言不语 发表于 2022-5-20 16:52

那日在油管，一个湾湾无脑女说大陆人“玻璃心”，被俺骂了个狗血喷头{:4_189:}

加林森 发表于 2022-5-20 17:40

好漂亮的制作，红影真厉害。{:4_199:}

马黑黑 发表于 2022-5-20 18:00

意境优美，漂酿

上海朝阳 发表于 2022-5-20 18:46

本帖最后由 上海朝阳 于 2022-5-20 18:47 编辑


绿叶清舟 发表于 2022-5-20 20:31

制作漂亮，很喜欢的歌了

大猫咪 发表于 2022-5-20 20:54

红影制作真棒，画面唯美， 融情入景，真棒！

{:4_204:}{:4_199:}

醉美水芙蓉 发表于 2022-5-20 21:51

红芍药 发表于 2022-5-21 08:37

喜欢的一首歌，影子做得真好看。{:4_204:}{:4_204:}

来看你 发表于 2022-5-22 17:34

制作漂亮，，女版也好听 {:4_199:}

红影 发表于 2022-5-22 22:03

小辣椒 发表于 2022-5-20 13:22
亲爱的，速度快的，这个图图配合的非常漂亮，按钮音标小图特别的美

不过都是黑黑的代码呢{:4_173:}

红影 发表于 2022-5-22 22:09

顾-念 发表于 2022-5-20 13:59
不能穿好看的衣服出门，是玻璃心了。

图文艺，好看

还不至于那么脆弱，反正不能出去，整天昏吃昏睡的，倒也省力了{:4_173:}
页: [1] 2
查看完整版本: 玻璃心