网站首页 › ┫图文画舫┣ › 【云。图文】◇执一朵淡荷◇

楚云飞 发表于 2025-6-24 20:20:58

【云。图文】◇执一朵淡荷◇

楚云飞 发表于 2025-6-24 20:21:32

<style>
    .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, ##E4080A, #1E3A8A);
    }

    .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://www.ctyhlt.com/uc_server/data/avatar/000/00/00/07_avatar_big.jpg" 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=463520687.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;
      }
    });
</script>

欧阳风刀 发表于 2025-6-24 21:47:36

逼真的做旧，古老的沧桑感。赞一个。

欧阳风刀 发表于 2025-6-24 21:47:59

欣赏学习，感谢哥们儿分享。

绿蔷薇 发表于 2025-6-25 10:29:26

楚帅图文越做越娴熟~~{:4_123:}

绿蔷薇 发表于 2025-6-25 10:31:44

唯美的，质感不失细致，纸张、撕边、缝线都非常逼真，标题和小字编排的漂亮~~

绿蔷薇 发表于 2025-6-25 10:32:02

向楚帅学习~~~{:S01:}

绿蔷薇 发表于 2025-6-25 10:34:48

执一朵淡荷 观残旧的意境
薇仿佛看到了万物本自圆满的模样

玫の玫 发表于 2025-6-25 10:42:02

这么好看的图文音画欣赏来迟了
背景是古朴的棕褐与米黄交织，
像旧时光沉淀的底色，
边角的破损纹理添了岁月感。
制作精美细致。{:1_154:}

玫の玫 发表于 2025-6-25 10:42:46

水墨荷花图淡雅清新，
与文字 “执一朵淡荷，绘出恬静人生” 呼应，
整体画面把古典韵味、荷的高洁，
用复古色彩与诗意文字融合，
营造出静谧悠远的中式意境，
每一处色调都在诉说淡泊风雅，
让人沉醉在这怀旧又清新的纸页故事里 。

查看完整版本: 【云。图文】◇执一朵淡荷◇