加林森 发表于 2022-8-29 09:35

水畔凉箫（学习老黑“秋”制作）

本帖最后由 加林森 于 2022-8-30 19:13 编辑 <br /><br /><style>
#papa { left: -214px; width: 1024px; height: 640px; background: tan url('https://pic.imgdb.cn/item/630c0cdd16f2c2beb1db2c41.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#conicPlayer { left: 20px; bottom: 20px; display: grid; place-items: center; width: 100px; height: 100px; border-radius: 50%; background: conic-gradient(from 180deg,red 0%, tan 0); cursor: pointer; position: absolute; }
#conicPlayer::before { position: absolute; content: attr(data-per); display: grid; place-items: center; width: 90px; height: 90px; border-radius: 50%; background: #FEFDF0; color: seagreen; font: normal 15px sans-serif; white-space: pre; transition: 1.2s; }
#lrctext { position: absolute; left: 130px; bottom: 55px; font: bold 1.4em sans-serif; color: #FF0000; text-shadow: 1px 1px 2px rgba(0,0,0,.95); user-select: none; transition: 1.2s; }
#lrctext:hover, #conicPlayer:hover::before { color: tomato; }
</style>

<div id="papa">
      <span id="conicPlayer" data-per="00:00
00:00"></span>
      <span id="lrctext">lrc歌词</span>
</div>

<script>
let lrcAr = [
      ['00.00', '水畔凉箫'],
      ['220.00','谢谢欣赏']
];
let aud = new Audio();

aud.src = 'https://music.163.com/song/media/outer/url?id=475421860.mp3';
aud.autoplay = true;
aud.loop = true;

conicPlayer.onclick = () => aud.paused ? aud.play() : aud.pause();

aud.addEventListener('timeupdate', () => {
      let current = aud.currentTime / aud.duration * 100;
      conicPlayer.style.background = `conic-gradient(from 0deg, red, orange, green, red ${current}%, tan 0)`;
      conicPlayer.setAttribute('data-per', toMin(aud.currentTime) + '\n' + toMin(aud.duration));
      for(j=0; j<lrcAr.length; j++) {
                if(aud.currentTime >= lrcAr) lrctext.innerText = lrcAr;
      }
});

let toMin = (val) => {
      if (!val) return '00:00';
      val = Math.floor(val);
      let min = parseInt(val / 60), sec = parseFloat(val % 60);
      if(min < 10) min = '0' + min;
      if(sec < 10) sec = '0' + sec;
      return min + ':' + sec;
}
</script>

加林森 发表于 2022-8-29 09:35

@马黑黑 @东篱闲人

东篱闲人 发表于 2022-8-29 11:19

秋光旖旎，令人沉醉。。。。{:4_187:}

东篱闲人 发表于 2022-8-29 11:19

加加学东西就是快！{:5_116:}

加林森 发表于 2022-8-29 11:22

东篱闲人 发表于 2022-8-29 11:19
秋光旖旎，令人沉醉。。。。

今天刚好看见老黑送你的“秋”，我再去找音乐，确定这首音乐挺不错的就定了。然后再去找图片。。。。

加林森 发表于 2022-8-29 11:23

东篱闲人 发表于 2022-8-29 11:19
加加学东西就是快！

套用很好用的。这张图片刚好使用的。

东篱闲人 发表于 2022-8-29 11:24

加林森 发表于 2022-8-29 11:22
今天刚好看见老黑送你的“秋”，我再去找音乐，确定这首音乐挺不错的就定了。然后再去找图片。。。。

所以说心动不如行动，加加心动的利索。。。。。{:5_116:}

加林森 发表于 2022-8-29 11:32

东篱闲人 发表于 2022-8-29 11:24
所以说心动不如行动，加加心动的利索。。。。。

我就剩这点行动了。。。。{:4_189:}

马黑黑 发表于 2022-8-29 12:14

伪元素的遮罩颜色，队长没有去获取。PS有这个功能的，或随便弄一个小软件，轻松获取。

加林森 发表于 2022-8-29 12:39

马黑黑 发表于 2022-8-29 12:14
伪元素的遮罩颜色，队长没有去获取。PS有这个功能的，或随便弄一个小软件，轻松获取。

我就是准备用PS试一试呢。谢谢你提醒。{:4_190:}

马黑黑 发表于 2022-8-29 12:41

加林森 发表于 2022-8-29 12:39
我就是准备用PS试一试呢。谢谢你提醒。

如果需要播放器圆环内区域的颜色与帖子背景色一致，一定要获取播放器周边的颜色，或作其他复杂的处理。

加林森 发表于 2022-8-29 12:44

马黑黑 发表于 2022-8-29 12:41
如果需要播放器圆环内区域的颜色与帖子背景色一致，一定要获取播放器周边的颜色，或作其他复杂的处理。

好的。我试一试。

加林森 发表于 2022-8-29 12:56

马黑黑 发表于 2022-8-29 12:41
如果需要播放器圆环内区域的颜色与帖子背景色一致，一定要获取播放器周边的颜色，或作其他复杂的处理。

你再来看看。

马黑黑 发表于 2022-8-29 13:13

加林森 发表于 2022-8-29 12:56
你再来看看。

这是改变了颜色，不是与背景色融为一体的做法

东篱闲人 发表于 2022-8-29 13:18

加林森 发表于 2022-8-29 11:32
我就剩这点行动了。。。。

别的肯定也有，你不好意思说。。。{:5_106:}

加林森 发表于 2022-8-29 15:31

马黑黑 发表于 2022-8-29 13:13
这是改变了颜色，不是与背景色融为一体的做法

等我回家再去修改。′现在我在查核酸。

加林森 发表于 2022-8-29 17:04

东篱闲人 发表于 2022-8-29 13:18
别的肯定也有，你不好意思说。。。

没有了。。。。

马黑黑 发表于 2022-8-29 18:15

加林森 发表于 2022-8-29 15:31
等我回家再去修改。′现在我在查核酸。

{:4_181:}

东篱闲人 发表于 2022-8-29 18:55

加林森 发表于 2022-8-29 17:04
没有了。。。。

你一到这时候就谦虚加客气。。。{:4_170:}

加林森 发表于 2022-8-29 19:24

本帖最后由 加林森 于 2022-8-29 19:31 编辑

马黑黑 发表于 2022-8-29 18:15

终于折腾完了。
页: [1] 2 3
查看完整版本: 水畔凉箫（学习老黑“秋”制作）