绿叶清舟 发表于 2023-4-30 10:48

守候-那英


<style>
#papa {
      margin: 0px 0 0 calc(50% - 633px);
      width: 1100px;
      height: 700px;
      background: lightblue url('https://pic2.imgdb.cn/item/644d177c0d2dde5777c5e9bc.jpg') center/cover no-repeat;
      box-shadow: 8px 4px 30px #333;
      position: relative;
}
#mplayer {
      right:580px;
      bottom: 40px;
      width: 200px;
      height: 100px;
      color: black;
      text-shadow: 1px 1px 2px;
      background: # linear-gradient(to top right,tan,black);
      box-shadow: px px 0px black;
      border-radius: 100px 100px 0 0;
      border: px solid #02024c ;
      display: grid;
      place-items: end center;
      cursor: pointer;
      transform: perspective(2000px) rotateY(-45deg);
      opacity: .55;
      position: absolute;
      --state: paused; --time: 300s;
}
#mplayer::before, #mplayer::after {
      position: absolute;
      content: '';
      width: 5px;
      height: 95px;
      transform-origin: 50% 100%;
}
#mplayer::before {
      background: linear-gradient(to bottom,snow,black,transparent);
      transform: rotate(-90deg);
      opacity: .85;
      animation: rot var(--time) linear infinite var(--state);
      --deg: 90deg;
}
#mplayer::after {
      background: linear-gradient(to bottom,black 92%, red 0);
      transform: rotate(-30deg);
      animation: rot 1s infinite alternate linear var(--state);
      --deg: 30deg;
}
.mypic { position: absolute; top: 240px; left: 70px;}
@keyframes rot {
      to { transform: rotate(var(--deg)); }
}
</style>

<div id="papa">
      <div id="mplayer">00:00   00:00</div>
      <img class="mypic" src="f" alt="" />
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1949075817" autoplay="autoplay" loop="loop"></audio>

<script>
(function() {
      let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60),sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};
      mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
      aud.addEventListener('play', () => mplayer.style.setProperty('--state','running'));
      aud.addEventListener('pause', () => mplayer.style.setProperty('--state','paused'));
      aud.addEventListener('canplay', () => mplayer.style.setProperty('--time',aud.duration + 's'));
      aud.addEventListener('timeupdate', () => mplayer.innerHTML = toMin(aud.currentTime) + '   ' +toMin(aud.duration));
})();
</script>

梦油 发表于 2023-4-30 10:57

欣赏好歌，问候清舟。

绿叶清舟 发表于 2023-4-30 11:10

梦油 发表于 2023-4-30 10:57
欣赏好歌，问候清舟。

梦油节日好

焱鑫磊 发表于 2023-4-30 11:33

欣赏绿叶清舟佳作！{:4_204:}

小辣椒 发表于 2023-4-30 12:56

这个指针用的巧妙

小辣椒 发表于 2023-4-30 12:56

欣赏清舟好制作{:4_199:}

醉美水芙蓉 发表于 2023-4-30 12:59

梦油 发表于 2023-4-30 16:23

绿叶清舟 发表于 2023-4-30 11:10
梦油节日好

谢谢清舟朋友的亲切问候。

亚伦影音工作室 发表于 2023-4-30 18:59

ps制作的大图很惊艳,美！

梦缘 发表于 2023-4-30 20:37

谢谢您的分享，欣赏问好！

绿叶清舟 发表于 2023-4-30 20:54

梦油 发表于 2023-4-30 16:23
谢谢清舟朋友的亲切问候。

不客气了

绿叶清舟 发表于 2023-4-30 20:54

亚伦影音工作室 发表于 2023-4-30 18:59
ps制作的大图很惊艳,美！

谢谢亚伦，节日快乐

绿叶清舟 发表于 2023-4-30 20:54

梦缘 发表于 2023-4-30 20:37
谢谢您的分享，欣赏问好！

谢谢梦缘，晚上好

马黑黑 发表于 2023-4-30 22:22

看看守候什么

红影 发表于 2023-4-30 23:10

清舟的这个播放器按钮颜色调得好美，背景图制作也好棒{:4_199:}

梦油 发表于 2023-5-1 09:46

绿叶清舟 发表于 2023-4-30 20:54
不客气了

清舟朋友五一节出去玩玩吧。

绿叶清舟 发表于 2023-5-1 10:08

梦油 发表于 2023-5-1 09:46
清舟朋友五一节出去玩玩吧。

这个五一不敢出去了，晚上同学聚个餐就算过节了

绿叶清舟 发表于 2023-5-1 10:08

红影 发表于 2023-4-30 23:10
清舟的这个播放器按钮颜色调得好美，背景图制作也好棒

影节日快乐，玩得开心点啊

绿叶清舟 发表于 2023-5-1 10:09

马黑黑 发表于 2023-4-30 22:22
看看守候什么

都看到了吧

梦油 发表于 2023-5-1 10:28

绿叶清舟 发表于 2023-5-1 10:08
这个五一不敢出去了，晚上同学聚个餐就算过节了

也是，到处是人挤人。
页: [1] 2
查看完整版本: 守候-那英