宁静 发表于 2023-3-28 21:50

动感音乐欣赏


<style>
#papa {
      margin: 150px 0 0 calc(50% - 700px);
      width: 1238px;
      height: 680px;
      background: lightblue url('https://wj.zp68.com/lxx/yunhua/2023/03/19/39.gif') center/cover no-repeat;
      box-shadow: 8px 4px 30px #333;
      position: relative;
}
#mplayer {
      right:40%;
      bottom: 40px;
      width: 200px;
      height: 100px;
      color: black;
      text-shadow: 1px 1px 2px orange;
      background: gray linear-gradient(to top right,tan,black);
      box-shadow: 4px 4px 30px black;
      border-radius: 100px 100px 0 0;
      border: 6px solid black;
      display: grid;
      place-items: end center;
      cursor: pointer;
      transform: perspective(2000px) rotateY(-45deg);
      opacity: .75;
      position: absolute;
      --state: paused; --time: 60s;
}
#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 .5s infinite alternate linear var(--state);
      --deg: 30deg;
}
.mypic { position: absolute; top: 240px; left: 700px;}
.mypic1 { position: absolute; top: 100px; left: 820px;}
@keyframes rot {
      to { transform: rotate(var(--deg)); }
}
</style>

<div id="papa">
      <div id="mplayer">00:00   00:00</div>
      <img class="mypic" src="https://wj.zp68.com/lxx/yunhua/2023/03/19/rw.gif" alt="" />
<img class="mypic1" src="https://wj.zp68.com/lxx/yunhua/2023/03/19/bt.png
" alt="" />
</div>
<audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2023/03/19/Man.mp3" 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>
<br><br><br><br><br>

宁静 发表于 2023-3-28 21:51

手机 电脑都可以欣赏的

宁静 发表于 2023-3-28 21:52

一首高音质的动感音乐

中文名字：让我们来谈谈一个男人

宁静 发表于 2023-3-28 21:55

外文歌曲名称：Let's Talk About A Man

沉默 发表于 2023-3-28 22:05

冲进来加分

宁静 发表于 2023-3-28 22:06

沉默 发表于 2023-3-28 22:05
冲进来加分

加完了马上下了去休息

宁静 发表于 2023-3-28 22:07

那边标题是鸟语{:9007:}

恋恋风尘 发表于 2023-3-28 22:10

音乐好听 我喜欢的类型{:9007:}

宁静 发表于 2023-3-28 22:11

恋恋风尘 发表于 2023-3-28 22:10
音乐好听 我喜欢的类型

你送怎么多花干嘛啊

沉默 发表于 2023-3-28 22:18

仔细听一遍就下
页: [1] 2 3
查看完整版本: 动感音乐欣赏