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

《Round and round》- 艾淋



<style>
.wrap {
      left: -30px;
      width: 820px; height: 528px;
      background: teal url('https://pic.imgdb.cn/item/6287938909475431296fd987.jpg') no-repeat center/cover;
      position: relative;
}
.circle {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 80px; height: 80px;
      left: 10px; bottom: 10px;
      border: solid 6px transparent;
      border-radius: 50%;
      background-image: radial-gradient(ghostwhite, transparent), linear-gradient(120deg,tomato,green,red,gold);
      background-origin: border-box;
      background-clip: content-box, border-box;
      cursor: pointer;
      font: normal 14px sans-serif;
      position: absolute;
}
.circle::before { position: absolute; content: attr(data-per); bottom: 20%;}
.circle::after { position: absolute; content: ''; width: 10px; height: 10px; background: olive; border-radius: 50%; }
.hand {
      position: absolute; width: 2px; height: 50%;
      bottom: 50%; background: rgba(200,20,20,.45);
      transform-origin: bottom;
}
</style>

<div class="wrap">
      <div class="circle" data-per="0%">
                <div class="hand"></div>
      </div>
</div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/05/17/711d2398943848bf22602273ecac408b.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
let circle = document.querySelector('.circle');
let hand = document.querySelector('.hand');
let aud = document.querySelector('#aud');
let current, task;

aud.addEventListener('timeupdate', function(){
      task = aud.duration;
      current = aud.currentTime;
      setProgress(task,current);
});

circle.onclick = () =>{ aud.paused ? aud.play() : aud.pause(); };

function setProgress(tt,cc) {
      if(tt <= 0 || cc <= 0) return false;
      let prog = 100 * cc / tt;
      hand.style.transform = `rotate(${360*prog/100}deg`;
      circle.setAttribute('data-per', prog.toFixed(2) + '%');
}
</script>

加林森 发表于 2022-5-20 21:18

本帖最后由 加林森 于 2022-5-20 21:37 编辑


[*]一遍又一遍我们出去，我们 走下去，但我们坠入爱河，爱，
爱因为每次你碰我我都在天堂，哦，每次你碰我，感觉就像天堂一样，哦，我们转来转去又转来转去，我们转来转去，再转来转去，我们可以推，我们可以拉，但我们仍然相爱，爱，爱你可以给我你的手臂，但这还不够，不，不，所以我们转来转去又转来转去，我们再转来转去，哦，因为每次你碰我我都在天堂，哦















每次你触摸我，感觉就像天堂，哦
，我们转来转去又转来转去，我们转来转去，再转来转
去，因为每次你触摸我，我都在天堂，哦，每
一次你触摸我，感觉就像天堂，哦，我们转来转去又转来转去，我们转来转去，再转来转去








Round and RoundLRC歌词我们出去，我们跌倒，但我们坠入爱河，爱，爱
我们进去，我们出去，但我们仍然相爱，爱，爱
而且我们绕来绕去
我们绕来绕去

因为每次你碰我我都在天堂，哦
每次你抚摸我，感觉就像天堂，哦
我们转来转去又转来转去
我们转来转去
转来转去又来
[ 00:52.09]
我们可以推，我们可以拉，但我们仍然相爱，爱，爱
你可以给我你的手臂，但这还不够，不，不
所以我们转来转去又转来转去
然后我们转来转去，哦

因为每次你碰我我都是在天堂，哦
每次你碰我，感觉就像天堂，哦
我们转来转去又转来转去
我们转来转去
一圈又一圈

因为每次你摸我我都在天堂，哦
每次你摸我，感觉就像天堂，哦
然后我们又绕又绕
我们绕又绕
绕又绕



加林森 发表于 2022-5-20 21:22

@马黑黑

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

加林森 发表于 2022-5-20 21:36

醉美水芙蓉 发表于 2022-5-20 21:27
欣赏队长佳作！

这个是跟到老黑教程制作的。

马黑黑 发表于 2022-5-20 21:39

漂酿

加林森 发表于 2022-5-20 21:41

马黑黑 发表于 2022-5-20 21:39
漂酿

这个播放器必须在比较黑的地方才能看见它的变化的吧。

马黑黑 发表于 2022-5-20 21:43

加林森 发表于 2022-5-20 21:41
这个播放器必须在比较黑的地方才能看见它的变化的吧。

未必，各种场景都行的

加林森 发表于 2022-5-20 21:45

马黑黑 发表于 2022-5-20 21:43
未必，各种场景都行的

嗯嗯，那就放心了。

马黑黑 发表于 2022-5-20 21:46

加林森 发表于 2022-5-20 21:45
嗯嗯，那就放心了。

它的背景色还是挺明显的

加林森 发表于 2022-5-20 21:47

马黑黑 发表于 2022-5-20 21:46
它的背景色还是挺明显的

嗯嗯，很特色的。我很喜欢。

马黑黑 发表于 2022-5-20 21:48

加林森 发表于 2022-5-20 21:47
嗯嗯，很特色的。我很喜欢。

喜欢就好

加林森 发表于 2022-5-20 21:49

马黑黑 发表于 2022-5-20 21:48
喜欢就好

我去找歌曲，再制作一个出来玩。

马黑黑 发表于 2022-5-20 21:49

加林森 发表于 2022-5-20 21:49
我去找歌曲，再制作一个出来玩。

挺好

加林森 发表于 2022-5-20 21:49

马黑黑 发表于 2022-5-20 21:49
挺好

嗯嗯

小辣椒 发表于 2022-5-20 21:58

队长速度的{:4_178:}

小辣椒 发表于 2022-5-20 21:59

加林森 发表于 2022-5-20 21:41
这个播放器必须在比较黑的地方才能看见它的变化的吧。

队长可以试各种背景颜色，看看哪种效果好

加林森 发表于 2022-5-20 22:04

小辣椒 发表于 2022-5-20 21:58
队长速度的

看见好的制作，不做一个出来就会心慌的。

加林森 发表于 2022-5-20 22:05

小辣椒 发表于 2022-5-20 21:59
队长可以试各种背景颜色，看看哪种效果好

嗯嗯，我就是准备再去制作一个出来看效果。

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

加林森 发表于 2022-5-20 22:04
看见好的制作，不做一个出来就会心慌的。

队长 我准备下了，晚安！

队长也是别每天熬夜啊{:4_179:}
页: [1] 2
查看完整版本: 《Round and round》- 艾淋