【淥詶の画】时光谣
<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>
<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>
坐沙发吃西瓜~ 开心欣赏美图，
破帅真厉害啊 ！
这图真好看 。
画面设计巧妙，
以湖畔为场景，
人物静坐木台，
姿态优雅。
光着脚一定很凉快吧 ！ 兔兔色彩美美哒，
暖黄衣裙点亮画面，
与背景秋叶的橙红、
湖水的淡绿、
天空的浅柔色调交融，
营造出怀旧又温柔的氛围。
整体通过色彩搭配与场景设计，
传递出静谧的时光美感，
似把观者带入悠然的秋日梦境，
沉醉于这温柔的岁月氛围中 。
为破帅美作点赞！{:1_154:}{:1_154:}
{:7_182:}迷人的场景，秋天的味儿。这意境绝了。 兄弟手艺真不赖！ {:S15:}这个场景要迷煞银个~~ 人物与风景结合的文艺风大片哈
配乐与画面搭配，给人带来愉悦的视听感受