楚云飞 发表于 2025-6-18 22:33:30

【云。图文】◇蝴蝶之恋◇





楚云飞 发表于 2025-6-18 22:34:05

<style>
    :root {
      --player-top: 0px;      /* 播放器顶部距离 */
      --player-left: 0px;   /* 播放器左侧距离 */
      --player-right: auto;   /* 播放器右侧距离 */
      --player-bottom: auto;/* 播放器底部距离 */
    }

    .mp3-player {
      position: relative;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0 8px 30px rgba(59, 130, 246, 0.3);
      background: linear-gradient(to bottom right, #3B82F6, #1E3A8A);
      margin: var(--player-top) var(--player-right) var(--player-bottom) var(--player-left);
    }

    .disk-container {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .disk-image {
      width: 84px;
      height: 84px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid rgba(255, 255, 255, 0.2);
      animation: rotate 10s linear infinite;
    }

    .disk-pause {
      animation-play-state: paused;
    }

    .disk-play {
      animation-play-state: running;
    }

    @keyframes rotate {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .play-pause-btn {
      position: absolute;
      inset: 0;
      margin: auto;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(4px);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background-color 0.3s;
      z-index: 10;
    }

    .play-pause-btn:hover {
      background-color: rgba(255, 255, 255, 0.3);
    }

    .play-icon {
      color: white;
      font-size: 12px;
    }
</style>

<div class="mp3-player">
    <!-- 唱片图片 -->
    <div class="disk-container">
      <img id="disk-image" src="https://picsum.photos/seed/record1/200/200" alt="唱片封面" class="disk-image disk-play">
    </div>
   
    <!-- 控制按钮 -->
    <button id="play-pause-btn" class="play-pause-btn">
      <i id="play-icon" class="play-icon fa fa-pause"></i>
    </button>
   
    <!-- 音频元素 -->
    <audio id="audio-player" autoplay loop>
      <source src="https://music.163.com/song/media/outer/url?id=440073301.mp3" type="audio/mpeg">
      您的浏览器不支持音频播放。
    </audio>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
      // 获取DOM元素
      const audioPlayer = document.getElementById('audio-player');
      const playPauseBtn = document.getElementById('play-pause-btn');
      const playIcon = document.getElementById('play-icon');
      const diskImage = document.getElementById('disk-image');
      
      // 播放/暂停功能
      playPauseBtn.addEventListener('click', function() {
            if (audioPlayer.paused) {
                audioPlayer.play();
                playIcon.classList.remove('fa-play');
                playIcon.classList.add('fa-pause');
                diskImage.classList.remove('disk-pause');
                diskImage.classList.add('disk-play');
            } else {
                audioPlayer.pause();
                playIcon.classList.remove('fa-pause');
                playIcon.classList.add('fa-play');
                diskImage.classList.remove('disk-play');
                diskImage.classList.add('disk-pause');
            }
      });
      
      // 更换唱片图片函数
      window.changeDiskImage = function(imageUrl) {
            diskImage.src = imageUrl;
      }
      
      // 调整播放器位置函数
      window.setPlayerPosition = function(top, right, bottom, left) {
            document.documentElement.style.setProperty('--player-top', top || '0px');
            document.documentElement.style.setProperty('--player-right', right || 'auto');
            document.documentElement.style.setProperty('--player-bottom', bottom || 'auto');
            document.documentElement.style.setProperty('--player-left', left || '0px');
      }
    });
</script>

绿蔷薇 发表于 2025-6-19 11:16:24

撒花花
问好楚帅
{:S01:}

绿蔷薇 发表于 2025-6-19 11:24:59

图文元素运用的娴熟，画面色彩丰富，设计别致，排字也好看~~

绿蔷薇 发表于 2025-6-19 11:25:21

蝴蝶为花碎
花却随风飞

绿蔷薇 发表于 2025-6-19 11:26:17

楚帅棒棒哒
为你点赞喝彩
{:5_130:}

玫の玫 发表于 2025-6-19 12:04:49

版式新颖独特，色彩 层次感很精彩，线条曲线 错落有致，美不胜收!

玫の玫 发表于 2025-6-19 12:05:00


质感精致，画质好，标题文字排版精彩，制作精心精美。感谢精彩分享！

玫の玫 发表于 2025-6-19 12:05:12

版式新颖独特，光影 色彩 层次感很精彩，线条曲线 错落有致，美不胜收!

玫の玫 发表于 2025-6-19 12:08:05

楚云飞 发表于 2025-6-18 22:34
:root {
      --player-top: 0px;      /* 播放器顶部距离 */
      --player-left: 0px;   /* ...

小播放器很精致~
页: [1] 2
查看完整版本: 【云。图文】◇蝴蝶之恋◇