加林森 发表于 2022-5-30 21:15

《枕边童话》- 小田音乐社 / 傲七爷


<style>
.wrap {
      left: -20px;
      width: 800px; height: 463px;
      background: teal url('https://pic.imgdb.cn/item/6294c22509475431292f987a.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;
}
.wrap::before {
      content: '';
      position: absolute;
      width: 50%;
      height: 50%;
      background: url('https://pic.imgdb.cn/item/6235d74f5baa1a80ab9d74a0.gif') no-repeat

center/cover;
      opacity: .55;
      left:30px; top: 20px;
}
</style>

<div class="wrap">
      <div class="circle" data-per="0%">
                <div class="hand"></div>
      </div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1456393572.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-30 21:15

枕边童话-小田音乐社 / 傲七爷

枕头下的童话书
私自收藏的幸福
少年的我想倾诉什么感触
迷失森林的小鹿
会不会遇到女巫
故事拉开序幕
星光拨开最神秘的雾
踮起脚尖旋转舞步
恍恍惚惚听谁在哭
月光叮嘱窗外的植物
遇到孩子记得让路
谁会救赎我孤独
你是那童话里的公主站在光明处
我戴上华丽假面转身躲进黑礼服
请和我起舞趁着童话还没有结束
天亮后让一切 恢复
枕头下的童话书
私自收藏的幸福
少年的我想倾诉什么感触
迷失森林的小鹿
会不会遇到女巫
故事拉开序幕
星光拨开最神秘的雾
踮起脚尖旋转舞步
恍恍惚惚听谁在哭
月光叮嘱窗外的植物
遇到孩子记得让路
谁会救赎我孤独
你是那童话里的公主站在光明处
我戴上华丽假面转身躲进黑礼服
请和我起舞趁着童话还没有结束
天亮后让一切 恢复
你是那童话里的公主站在光明处
我戴上华丽假面转身躲进黑礼服
请和我起舞趁着童话还没有结束
天亮后让一切 恢复

小辣椒 发表于 2022-5-30 21:19

队长做图找到一点感觉了，继续~~~会越来越美的

加林森 发表于 2022-5-30 21:25

小辣椒 发表于 2022-5-30 21:19
队长做图找到一点感觉了，继续~~~会越来越美的

嗯嗯，知道了。会努力的。

红影 发表于 2022-5-30 22:42

图意和歌曲很符合，欣赏队长漂亮的制作{:4_187:}

加林森 发表于 2022-5-31 07:59

红影 发表于 2022-5-30 22:42
图意和歌曲很符合，欣赏队长漂亮的制作

谢谢红影支持！{:4_204:}

红影 发表于 2022-5-31 10:09

加林森 发表于 2022-5-31 07:59
谢谢红影支持！

问好队长，上午好。

加林森 发表于 2022-5-31 10:30

红影 发表于 2022-5-31 10:09
问好队长，上午好。

红影上午好。听说你们要解放了吧。

马黑黑 发表于 2022-6-1 18:23

队长作品那么多，这得花多少精力呀

加林森 发表于 2022-6-1 18:28

马黑黑 发表于 2022-6-1 18:23
队长作品那么多，这得花多少精力呀

反正退休了没有事情，闲得发慌，就跟着学习吧。

马黑黑 发表于 2022-6-1 19:12

加林森 发表于 2022-6-1 18:28
反正退休了没有事情，闲得发慌，就跟着学习吧。

悠着点就好哈

加林森 发表于 2022-6-1 19:17

马黑黑 发表于 2022-6-1 19:12
悠着点就好哈

要得要得。
页: [1]
查看完整版本: 《枕边童话》- 小田音乐社 / 傲七爷