圊圊淥詶 发表于 2025-6-28 20:26:42

【淥詶の画】时光谣

<DIV style="LEFT: -752px; WIDTH: 1900px; POSITION: relative; TOP: 20px">

<style>
#mydiv { margin: 0 0 0 calc(50% - 850px);
display: grid;
place-items: center;
width: 1900px;
height: 900px;
top:130px;
background: lightblue url('http://www.yhyhlt.com/data/attachment/forum/202506/28/201545ps93hq4zt559w47r.jpg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
user-select: none;
overflow: hidden;
position: relative;
z-index: 1;
}
.mypic {
position: absolute;
right: 490px;
top: 420px;
cursor: pointer;
mix-blend-mode: Multiply;
z-index: 3;
}
#vid {
position: absolute;
width: 100%;
height: 110%;
top:-80px;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
z-index: 2;
opacity: .21;
}
</style>
<div id="mydiv">

<img id="dt" src="2" alt="" style="position: absolute; width: 166px; top: 446px; left: 1308px;" />

<video id="vid" src="https://yw83yw.oss-cn-hangzhou.aliyuncs.com/lvzhou/flash/MP4/DH04.mp4 " autoplay="" loop="" muted=""></video>
</div>

</DIV>


<br><br><br><br><br><br><br><br><br><br><br><br>










圊圊淥詶 发表于 2025-6-28 20:28:27

<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="http://www.yhyhlt.com/data/attachment/forum/202506/28/202201o309cz61jq9r8y6u.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://yw83yw.oss-cn-hangzhou.aliyuncs.com/lvzhou/YSP/2022/mp3/SGY.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>



<BR><BR><BR>
学一个新的播放器,哈哈~~<BR>
《时光谣》,第二次用到这首歌,可见我是有多喜欢这首蛐蛐~~<BR>
{:4_123:}

<BR><BR><BR>

玫の玫 发表于 2025-6-28 21:43:26

坐沙发吃西瓜~

玫の玫 发表于 2025-6-28 21:44:36

开心欣赏美图,
破帅真厉害啊 !
这图真好看 。
画面设计巧妙,
以湖畔为场景,
人物静坐木台,
姿态优雅。
光着脚一定很凉快吧 !

玫の玫 发表于 2025-6-28 21:45:00

兔兔色彩美美哒,
暖黄衣裙点亮画面,
与背景秋叶的橙红、
湖水的淡绿、
天空的浅柔色调交融,
营造出怀旧又温柔的氛围。

玫の玫 发表于 2025-6-28 21:47:15


整体通过色彩搭配与场景设计,
传递出静谧的时光美感,
似把观者带入悠然的秋日梦境,
沉醉于这温柔的岁月氛围中 。
为破帅美作点赞!{:1_154:}{:1_154:}

欧阳风刀 发表于 2025-6-28 21:57:43

{:7_182:}迷人的场景,秋天的味儿。这意境绝了。

欧阳风刀 发表于 2025-6-28 21:58:32

兄弟手艺真不赖!

绿蔷薇 发表于 2025-6-29 15:15:32

{:S15:}这个场景要迷煞银个~~

绿蔷薇 发表于 2025-6-29 15:19:32

人物与风景结合的文艺风大片哈
配乐与画面搭配,给人带来愉悦的视听感受
页: [1] 2 3
查看完整版本: 【淥詶の画】时光谣