诗与远方
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>诗与远方 - 熊七梅</title>
</head>
<body>
<style>
@import 'https://638183.freep.cn/638183/web/mod/btn_lrc.css';
#tz { --state: running; width: 1280px; height: 790px;margin: 30px 0 30px calc(50% - 721px); background: url('https://s3.bmp.ovh/imgs/2026/01/11/042a583c2b4a4015.jpeg') no-repeat center/100% 100%;overflow: hidden; }
#myimage{ position: absolute; cursor: pointer; left: 3%;top:5%;z-index: 5; animation: swing 2s infinite var(--state); }
@keyframes swing {0% {transform: rotate(-2deg);} 50% {transform: rotate(2deg);}100% {transform: rotate(-2deg);}}
#textClock{ position: absolute; top:16%;Right: 16%; font:normal 1.8em 华文隶书;color:Yellow;box-shadow: 2px 2px 4px #000;z-index: 10; }
#vid { mix-blend-mode: screen;mask: linear-gradient(to right top, red 0%, transparent 90%, transparent);-webkit-mask: linear-gradient(to right top, red 0%, transparent 90%, transparent);pointer-events: none;top:0px;left:0px:width: 100%; height:100%; overflow: hidden;}
.vid1 {mix-blend-mode: screen;mask: linear-gradient(to bottom, red 0%,red 33%, transparent 35%,transparent 90%, transparent);-webkit-mask: linear-gradient(to bottom, red 0%, red 33%,transparent 35%,transparent 90%, transparent);pointer-events: none;top:0px;left:0px:width: 100%; height:100%; overflow: hidden; }
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg:linear-gradient(89deg,
#EE0000 12%,#078504 35%,#060344 65%,#DE0000 90%);border:0px solid black;position: absolute;z-index: 6;font:blod 3em 华文新魏;color:#228B22;white-space: pre;-webkit-background-clip: text;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px 0);z-index: 15;}
#lrc{position: absolute;width: 80%; height: 55px; top: 88%;color: #ff0000;left:10%; font:bold 2.8em 华文行楷; text-align: center;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);}
#lrcc {left: 85%;transform: translate(-100%);top: 85%;}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 100%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg); clip-path: inset(0% 100% 0 0); -webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover2 {to { clip-path: inset(0 0 0 0);}}
.fsbtn { position: absolute;z-index: 20; color:yellow; top:8%;right: 5%;opacity: 1; }
#mplayer {right: 2%; top: 5%;width: 400px; height: 400px; display: grid; place-items: center;z-index: 10;animation: spin 18s linear infinite var(--state); }
@keyframes spin { 0% { transform: rotate(360deg)scale(0.8);filter:hue-rotate(360deg)contrast(100%)brightness(200%); } 50% { transform: rotate(0deg)scale(0.8);filter:hue-rotate(0deg)contrast(100%)brightness(100%); opacity: 1;}100% { transform: rotate(-360deg)scale(0.8);filter:hue-rotate(0deg)contrast(100%)brightness(100%); opacity: 0.5;}}
.controls{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:20px;z-index:10;}
#progress{width:300px;height:4px;-webkit-appearance:none;background:#00cc00;border-radius:2px;outline:none;}
#progress::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:#fff;border-radius:50%;cursor:pointer;}
.time-display{font-size:14px;color:#00ff00;min-width:80px;text-align:center;}
</style>
<div id="tz" class="pa">
<div class="controls">
<input type="range" id="progress" min="0" max="100" value="0">
<span id="timeDisplay" class="time-display">0:00 / 0:00</span>
</div>
<div id="textClock"></div>
<img id="myimage"class="mplayer" src="https://s3.bmp.ovh/imgs/2025/12/24/5abceb3b655a3d38.gif" width="50" height="90">
<div id="mplayer" class="mplayer"><svg width="200" height="200"viewBox="0 0 400 400">
<polygonpoints="400.00,200.00 2.04,171.54 391.90,256.35 18.07,116.92 368.25,308.13 48.85,69.03 330.97,351.15 91.87,31.75 283.08,381.93 143.65,8.10 228.46,397.96 200.00,0.00 171.54,397.96 256.35,8.10 116.92,381.93 308.13,31.75 69.03,351.15 351.15,69.03 31.75,308.13 381.93,116.92 8.10,256.35 397.96,171.54 0.00,200.00 397.96,228.46 8.10,143.65 381.93,283.08 31.75,91.87 351.15,330.97 69.03,48.85 308.13,368.25 116.92,18.07 256.35,391.90 171.54,2.04 200.00,400.00 228.46,2.04 143.65,391.90 283.08,18.07 91.87,368.25 330.97,48.85 48.85,330.97 368.25,91.87 18.07,283.08 391.90,143.65 2.04,228.46" fill-rule="nonzero | evenodd" fill="#ff0000" stroke="#00f000" stroke-width="1" />
</svg></div>
<audio src="https://www.joy127.com/url/141823.mp3" loop autoplay></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/23/02/27/14/43/20/video63fc51087193b.mp4" autoplay loop muted></video>
<video class="vid1" src="https://video-qn.51miz.com/vcg/video/preview/51miz42N1337588768.mp4" autoplay loop muted></video>
<video class="vid" id="vid" src="https://img.tukuppt.com/video_show/2418175/01/49/21/6355e21544a03.mp4" autoplay loop muted></video>
<div id="lrc" class="lrc" data-lrc="HCPlayer"></div>
<div id="mplayer" class="mplayer"></div>
<div id="fsbtn" class="fsbtn"></div>
</div>
<script type="module">
import { hcplay } from 'https://638183.freep.cn/638183/web/mod/btn_lrc.js';
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
var lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
hcplay(tz, lrcAr);
fscreen.fs(tz, fsbtn);
showTime();
setInterval(showTime, 1000);
function showTime(){
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1;
var date = now.getDate();
var day = now.getDay();
var hour = now.getHours();
if(hour < 10) hour = "0" + hour;
var minute = now.getMinutes();
if(minute < 10) minute = "0" + minute;
var second = now.getSeconds();
if(second < 10) second = "0" + second;
document.getElementById("textClock").innerHTML = year + "年" + month + "月" + date + "日 星期" + toHz(day) + "" + hour + ":" + minute + ":" + second;
}
function toHz(num) {
var hz = "日一二三四五六";
return(hz.charAt(num));
}
const bulbEl = document.getElementById('myimage');
const audioEl = document.querySelector('audio');
const bulbImgs = {
on: "https://s3.bmp.ovh/imgs/2025/12/24/559248949acde599.gif",
off: "https://s3.bmp.ovh/imgs/2025/12/24/5abceb3b655a3d38.gif"
};
audioEl.addEventListener('play', () => bulbEl.src = bulbImgs.on);
audioEl.addEventListener('pause', () => bulbEl.src = bulbImgs.off);
bulbEl.src = audioEl.paused ? bulbImgs.off : bulbImgs.on;
const progress = document.getElementById('progress');
const timeDisplay = document.getElementById('timeDisplay');
const audio = document.querySelector('audio');
const formatTime = (seconds) => {
if (isNaN(seconds)) return "0:00";
const minutes = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${minutes}:${secs < 10 ? '0' + secs : secs}`;
};
const updateProgress = () => {
if (!audio.duration) return;
const progressPercent = (audio.currentTime / audio.duration) * 100;
progress.value = progressPercent;
timeDisplay.textContent = `${formatTime(audio.currentTime)} / ${formatTime(audio.duration)}`;
};
audio.addEventListener('loadedmetadata', () => {
timeDisplay.textContent = `0:00 / ${formatTime(audio.duration)}`;
});
audio.addEventListener('timeupdate', updateProgress);
progress.addEventListener('input', () => {
if (!audio.duration) return;
const targetTime = (progress.value / 100) * audio.duration;
audio.currentTime = targetTime;
updateProgress();
});
audio.addEventListener('play', updateProgress);
audio.addEventListener('pause', updateProgress);
window.addEventListener('load', () => {
if (audio.duration) {
timeDisplay.textContent = `0:00 / ${formatTime(audio.duration)}`;
}
});
</script>
</body>
</html>
喜欢！{:4_187:} 这个帖子里两个播放器按钮呢，一个是随进度变色的，一个在暂停和播放间颜色也是变化的，好看的制作{:4_187:} 帖子里还带当前时间的呢。
画面很美好，欣赏杨帆好帖{:4_199:} 扬帆的制作越来越精致了，欣赏学习，祝你制作愉快！{:4_204:}{:4_190:}
两个小播漂亮还可以随意停播，歌曲正能量好听，画面向上，MP4多重运用精彩。太棒了！{:4_187:} 谢谢杨帖精彩分享！早上好！{:4_204:} 播放器玄幻好看。{:4_199:} https://editor-img.888ban.com/gif_complete_img/2021-05-07/small_a6275c5cb46bfe10c06d17ca19259e2c.png?auth_key=2281017600-0-0-58fe2c98ae18bee631b50e50cb43ae4c 浪漫情怀，如斯。 杨帆老师制作的该作品以“诗与远方”为核心主题，通过视觉与听觉的深度融合，构建出兼具诗意与远方意境的艺术体验。 画面中，静谧的湖畔、远山的轮廓与人物的剪影交织，营造出宁静而富有张力的空间感 舒缓的歌声与白云、绿色植物相得益彰，将“诗”的细腻与“远方”的辽阔巧妙融合。 作品通过光影的明暗对比、色彩的柔和过渡，以及动态元素的恰到好处运用，既保留了“诗”的抒情性，又赋予“远方”以具体的视觉与听觉载体，让观者在沉浸式体验中感受到对美好生活的热爱与对未来的憧憬。
感谢杨帆的创作，愿您的作品继续为更多人带来心灵的慰藉与前行的力量。 小文 发表于 2026-1-11 21:50
喜欢！
问好小文~读万卷书 ，行万里路，还自己诗与远方{:4_191:}
红影 发表于 2026-1-11 22:16
帖子里还带当前时间的呢。
画面很美好，欣赏杨帆好帖
问好影子~谢谢鼓励~当前时间是套用小辣椒代码{:4_204:} 霜染枫丹 发表于 2026-1-11 23:22
扬帆的制作越来越精致了，欣赏学习，祝你制作愉快！
问好枫丹~谢谢鼓励~祝生命的每一天像夏花般灿烂{:4_204:}
梦江南 发表于 2026-1-12 07:37
两个小播漂亮还可以随意停播，歌曲正能量好听，画面向上，MP4多重运用精彩。太棒了！
问好江南，谢谢雅评与鼓励，祝读万卷书，行万里路，看风光无限{:4_204:}
樵歌 发表于 2026-1-12 07:58
播放器玄幻好看。
问好樵歌，谢谢鼓励，祝愿生命的每一天像夏花般灿烂{:4_191:}
页:
[1]
2