大猫咪 发表于 2024-3-23 21:36

偷心 - 张学友

<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=190233.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>

绿叶清舟 发表于 2024-3-23 21:43

猫偷了谁的心了{:4_189:}

大猫咪 发表于 2024-3-23 21:48

看了几集《繁花》中听到歌神这首《偷心》感觉挺好听！都在放，火出圈了 {:5_106:}

大猫咪 发表于 2024-3-23 21:54

绿叶清舟 发表于 2024-3-23 21:43
猫偷了谁的心了
《偷心》一响胡歌拿奖！清舟看电视剧没，猫就看了几集 {:5_117:}

樵歌 发表于 2024-3-24 07:02

谁偷了猫的心，{:4_189:}

庶民 发表于 2024-3-24 08:30

美好的制作。、

世外桃源 发表于 2024-3-24 11:00

背景图片太美了{:4_178:}

世外桃源 发表于 2024-3-24 11:00

小圆里面的人在看对面的景色

世外桃源 发表于 2024-3-24 11:01

张学友的歌，必须赞{:4_199:}

世外桃源 发表于 2024-3-24 11:01

感谢老师分享

大猫咪 发表于 2024-3-24 20:10

樵歌 发表于 2024-3-24 07:02
谁偷了猫的心，

这都不知道阿   {:5_117:} 笨{:4_397:}

绿叶清舟 发表于 2024-3-24 20:11

大猫咪 发表于 2024-3-23 21:54
《偷心》一响胡歌拿奖！清舟看电视剧没，猫就看了几集

一集都没看过了，听说很吵的

大猫咪 发表于 2024-3-24 20:11

庶民 发表于 2024-3-24 08:30
美好的制作。、

谢谢庶民老师支持鼓励！ {:4_204:}{:4_190:}晚上好！{:4_190:}

大猫咪 发表于 2024-3-24 20:14

世外桃源 发表于 2024-3-24 11:01
感谢老师分享

谢谢桃源支持鼓励，俺才开始学习不久， 黑黑才是老师，{:5_116:}

空了一起学习，一起开心玩！ 问好！ {:4_180:}

大猫咪 发表于 2024-3-24 20:15

绿叶清舟 发表于 2024-3-24 20:11
一集都没看过了，听说很吵的

哈哈马马虎虎看看   特别适合上海人看   清舟空了去欣赏下{:5_106:}{:4_179:}

樵歌 发表于 2024-3-24 20:33

大猫咪 发表于 2024-3-24 20:10
这都不知道阿    笨

别人偷了肯定藏她心里，不给人瞧，俺如何知道{:4_189:}

绿叶清舟 发表于 2024-3-24 20:46

大猫咪 发表于 2024-3-24 20:15
哈哈马马虎虎看看   特别适合上海人看   清舟空了去欣赏下

好的，听说这个一放以后黄河路又火起来了

大猫咪 发表于 2024-3-24 20:51

绿叶清舟 发表于 2024-3-24 20:46
好的，听说这个一放以后黄河路又火起来了

必须的   中国人追星厉害，{:4_189:}

绿叶清舟 发表于 2024-3-24 20:55

大猫咪 发表于 2024-3-24 20:51
必须的   中国人追星厉害，

那里感觉荒废了好几年了一个电视剧就能火，真没想到，而且黄河路上俺是一直没有特别感兴趣的店

大猫咪 发表于 2024-3-24 20:57

绿叶清舟 发表于 2024-3-24 20:55
那里感觉荒废了好几年了一个电视剧就能火，真没想到，而且黄河路上俺是一直没有特别感兴趣的店

好像都是吃的多，老房子漂亮
页: [1] 2
查看完整版本: 偷心 - 张学友