加林森 发表于 2022-5-21 10:55

《意乱情迷》- 徐小凤

本帖最后由 加林森 于 2022-5-21 13:01 编辑 <br /><br /><style>
.wrap {
      left: -20px;
      width: 800px; height: 463px;
      background: teal url('https://pic.imgdb.cn/item/628852a90947543129d5180b.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://www.joy127.com/url/928.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-21 10:55

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

意乱情迷 - 徐小凤



自从我遇见你

心里永远不忘记

我只怕后悔无期

一起向前飞

有一天

在街上见你

对我阴阳怪气

我心里只有怀疑

你好象对我无意

从此不想你

第二次遇见你

幸福要你猜疑

可是你支开情意

怎不叫人离

走上前 要和你谈谈情意

你说你有伴侣

我只叹没有福气

把爱情隐藏心底

不再想念你

梦油 发表于 2022-5-21 11:24

欣赏美乐，问候队长。

加林森 发表于 2022-5-21 11:38

梦油 发表于 2022-5-21 11:24
欣赏美乐，问候队长。

谢谢老梦！

小辣椒 发表于 2022-5-21 11:40

队长要学习加其他效果进去

加林森 发表于 2022-5-21 11:42

小辣椒 发表于 2022-5-21 11:40
队长要学习加其他效果进去

嗯嗯，我准备加字了。

小辣椒 发表于 2022-5-21 11:48

加林森 发表于 2022-5-21 11:42
嗯嗯，我准备加字了。

加个小动图进去试试

加林森 发表于 2022-5-21 11:54

小辣椒 发表于 2022-5-21 11:48
加个小动图进去试试

嗯嗯，我去试一试。

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

队长制作真漂亮， 很有年代感，经典老歌！真好听！

{:4_204:}{:4_199:}

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

大猫咪 发表于 2022-5-21 12:02
队长制作真漂亮， 很有年代感，经典老歌！真好听！

是的，老照片耐看。{:4_204:}{:4_190:}

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

加林森 发表于 2022-5-21 12:03
是的，老照片耐看。

嗯   歌坛大姐大{:4_187:}

加林森 发表于 2022-5-21 12:13

大猫咪 发表于 2022-5-21 12:07
嗯   歌坛大姐大

现在还在的，71岁了。

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

加林森 发表于 2022-5-21 12:13
现在还在的，71岁了。

是的{:4_187:}

加林森 发表于 2022-5-21 12:29

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

嗯嗯

红影 发表于 2022-5-21 12:58

这个图图制作漂亮的，队长真棒{:4_187:}

加林森 发表于 2022-5-21 13:02

小辣椒 发表于 2022-5-21 11:48
加个小动图进去试试

现在加进去了两只蝴蝶。{:4_189:}

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

红影 发表于 2022-5-21 12:58
这个图图制作漂亮的，队长真棒

红影中午好。我又加进去两只蝴蝶在转圈玩。{:4_189:}

小辣椒 发表于 2022-5-21 15:47

队长厉害的。一下子蝴蝶加进去了{:4_178:}

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

小辣椒 发表于 2022-5-21 15:47
队长厉害的。一下子蝴蝶加进去了

好看吧。

小辣椒 发表于 2022-5-21 15:54

加林森 发表于 2022-5-21 15:49
好看吧。

增加了界面的灵动感，不错
页: [1] 2 3 4
查看完整版本: 《意乱情迷》- 徐小凤