论坛 › 欢乐水吧 › 《奔赴星空》- 贺敬轩（根据老黑教程制作）

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

《奔赴星空》- 贺敬轩（根据老黑教程制作）

<style>
.mama {
      width: 800px;
      height: 600px;
      background-color: teal;
      background-image: linear-gradient(gray 5%, transparent, lightseagreen),
                radial-gradient(circle at 20% 20%, yellow, gold);
}
.mama img {
      position: absolute;
      width: 200px;
      border-radius: 50%;
      transform: translate(610px, 100px);
}
.circle {
      top: 10px; left: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 80px;
      height: 80px;
      border: 10px solid #5d513c;
      border-radius: 50%;
      background: linear-gradient(45deg, #ccc, #fff);
      cursor: pointer;
      position: relative;
}
.circle::before, .circle::after { position: absolute; content: ''; }
.circle::before { font: normal 14px sans-serif; content: attr(data-per); }
.circle::after {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #eee;
      right: -10px;
}
.ball {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #eee;
      background-image: radial-gradient(#fff, transparent);
}
@keyframes rot {
      from {transform: rotate(-90deg) translate(105px); }
      to { transform: rotate(270deg) translate(105px); }
}
</style>

<div class="mama">
      <audio id="aud" src="https://www.joy127.com/url/90447.mp3" autoplay="autoplay" loop="loop"></audio>
      <div class="circle" data-per="0%">
                <div class="ball"></div>
                <img src="https://pic.imgdb.cn/item/6288b3eb094754312924cc75.jpg" alt="" />
               
      </div>
</div>

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

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;
      ball.style.transform = `rotate(${360*prog/100}deg) translate(45px)`;
      circle.setAttribute('data-per', prog.toFixed(2) + '%');
}
</script>

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

奔赴星空 - 贺敬轩 (CoCo Ho)

词：景尧

曲：贰叁伍

编曲：马小天/陆泰名

吉他：陆泰名

贝斯：楚小波

鼓：祁大为

弦乐：国际首席爱乐乐团

监制：周晓明

混音：周晓明

母带：周晓明

制作人：林华勇

（版权所有 未经许可 请勿使用）

若我可以化作一颗星陪你闪耀

让月色温柔这季节的面貌

追着时光奔跑 等流星划过就祈祷

在某一刻我开始变得重要

把你的烦恼全抛到银河里丢掉

然后微风不燥一切都刚好

如梦般的自由再画出浪漫的符号

让这段远距离能慢慢颠倒

你落在了星空而我在人海中

抬头看到的你就是我眼里的苍穹

想念是不停歇的风就任它放纵

带我所想的飞去有你的星空

你落在了星空而我忧心忡忡

怕犹豫中无处安放地情绪你不懂

不是三秒钟的心动会消失无踪

想和你度过所有的春夏秋冬

若我可以化作一颗星陪你闪耀

让月色温柔这季节的面貌

追着时光奔跑 等流星划过就祈祷

在某一刻我开始变得重要

把你的烦恼全抛到银河里丢掉

然后微风不燥一切都刚好

如梦般的自由再画出浪漫的符号

让这段远距离能慢慢颠倒

你落在了星空而我在人海中

抬头看到的你就是我眼里的苍穹

想念是不停歇的风就任它放纵

带我所想的飞去有你的星空

你落在了星空而我忧心忡忡

怕犹豫中无处安放地情绪你不懂

不是三秒钟的心动会消失无踪

想和你度过所有的春夏秋冬

你落在了星空而我在人海中

抬头看到的你就是我眼里的苍穹

想念是不停歇的风就任它放纵

带我所想的飞去有你的星空

你落在了星空而我忧心忡忡

怕犹豫中无处安放地情绪你不懂

不是三秒钟的心动会消失无踪

想和你度过所有的春夏秋冬

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

@马黑黑感谢老黑，用你的代码制作出来的。

醉美水芙蓉 发表于 2022-5-21 18:00

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

醉美水芙蓉 发表于 2022-5-21 18:00
很漂亮，欣赏学习队长佳作！

谢谢水芙蓉支持！{:4_204:}{:4_190:}

红影 发表于 2022-5-21 18:29

队长做得真快，真勤奋{:4_199:}

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

红影 发表于 2022-5-21 18:29
队长做得真快，真勤奋

红影晚上好！谢谢你支持！{:4_204:}

马黑黑 发表于 2022-5-21 19:02

清新可爱

加林森 发表于 2022-5-21 19:05

嗯嗯。谢谢老黑了！

大猫咪 发表于 2022-5-21 20:56

队长学习真快！ 制作好看，歌也好喜欢！

{:4_187:}{:4_199:}

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

大猫咪 发表于 2022-5-21 20:56
队长学习真快！ 制作好看，歌也好喜欢！

猫猫上来啦。晚上好！{:4_204:}{:4_190:}

大猫咪 发表于 2022-5-21 20:58

加林森 发表于 2022-5-21 20:58
猫猫上来啦。晚上好！

来一会了   队长晚上好{:4_187:}

加林森 发表于 2022-5-21 21:00

大猫咪 发表于 2022-5-21 20:58
来一会了   队长晚上好

哦，我刚才出去散步去了。晚上好！{:4_204:}{:4_190:}

大猫咪 发表于 2022-5-21 21:01

加林森 发表于 2022-5-21 21:00
哦，我刚才出去散步去了。晚上好！

嗯嗯 必须天天坚持   身体好啥都好   {:4_179:}

加林森 发表于 2022-5-21 21:03

大猫咪 发表于 2022-5-21 21:01
嗯嗯 必须天天坚持   身体好啥都好

现在外面的雨又下大了。就是，所以我是风雨无阻的。

大猫咪 发表于 2022-5-21 21:05

加林森 发表于 2022-5-21 21:03
现在外面的雨又下大了。就是，所以我是风雨无阻的。

嗯一样西南都西雨

加林森 发表于 2022-5-21 21:06

大猫咪 发表于 2022-5-21 21:05
嗯一样西南都西雨

就是。现在还不习惯这个天气了。

大猫咪 发表于 2022-5-21 21:07

加林森 发表于 2022-5-21 21:06
就是。现在还不习惯这个天气了。

嗯老冷了

加林森 发表于 2022-5-21 21:09

大猫咪 发表于 2022-5-21 21:07
嗯老冷了

我现在是不怕冷不怕热的。每天都出去走路锻炼。

大猫咪 发表于 2022-5-21 21:12

加林森 发表于 2022-5-21 21:09
我现在是不怕冷不怕热的。每天都出去走路锻炼。

{:5_116:} 队长真棒{:4_179:}

查看完整版本: 《奔赴星空》- 贺敬轩（根据老黑教程制作）