加林森 发表于 2022-2-8 11:06

本帖最后由 加林森 于 2022-5-22 21:18 编辑 <br /><br />大猫咪 发表于 2022-2-8 11:00
制作真漂亮队长！ 必须点赞！ 中午好！
猫猫到家了吗？中午好！{:4_187:}{:4_190:}

<style>
.wrap {
      left: -214px;
      width: 1024px; height: 682px;
      background: teal url('https://pic.imgdb.cn/item/628a33fe094754312933ffc7.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="http://www.kumeiwp.com/sub/filestores/2022/05/22/101498f4829181c40fb67b5d1aa046fb.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-2-8 11:07

加林森 发表于 2022-2-8 11:06
猫猫到家了吗？中午好！

在上班了队长 {:4_179:}{:5_106:}{:4_190:}

加林森 发表于 2022-2-8 11:17

大猫咪 发表于 2022-2-8 11:00
制作真漂亮队长！ 必须点赞！ 中午好！

猫猫中午好！{:4_204:}{:4_190:}

加林森 发表于 2022-2-8 11:18

大猫咪 发表于 2022-2-8 11:07
在上班了队长

好的好的。{:4_179:}

大猫咪 发表于 2022-2-8 11:22

加林森 发表于 2022-2-8 11:18
好的好的。

{:4_179:}{:4_190:}

加林森 发表于 2022-2-8 11:30

大猫咪 发表于 2022-2-8 11:22


{:4_179:}{:4_190:}

杨柳青 发表于 2022-2-8 21:26

加林森 发表于 2022-2-8 09:01
哼哼

{:5_115:}

加林森 发表于 2022-2-8 22:10

杨柳青 发表于 2022-2-8 21:26


{:4_197:}

杨柳青 发表于 2022-2-8 23:00

加林森 发表于 2022-2-8 22:10


{:4_203:}

加林森 发表于 2022-2-8 23:04

杨柳青 发表于 2022-2-8 23:00


{:4_170:}

杨柳青 发表于 2022-2-8 23:14

加林森 发表于 2022-2-8 23:04


什么的情况~~{:5_115:}

加林森 发表于 2022-2-9 08:32

杨柳青 发表于 2022-2-8 23:14
什么的情况~~

早晨好

杨柳青 发表于 2022-2-10 22:10

加林森 发表于 2022-2-9 08:32
早晨好

夜里相好~~{:4_187:}

加林森 发表于 2022-2-10 22:56

杨柳青 发表于 2022-2-10 22:10
夜里相好~~

现在好
页: 1 [2]
查看完整版本: 《卫兰 - 街灯晚餐(Hyman Remix)2K20》 送大家！