故乡回望

杨帆发表于 2026-9-1 13:01

本帖最后由杨帆于 2026-9-4 09:56 编辑 <br /><br /><html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>故乡回望</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&family=Liu+Jian+Mao+Cao&family=Long+Cang&family=Ma+Shan+Zheng&family=ZCOOL+QingKe+HuangYou&display=swap");
#papa{position:relative;display:grid;place-items:center;margin:30px 0;width:1280px;height:750px;left:calc(50% - 81px);transform:translateX(-50%);box-shadow:3px 3px 6px gray;overflow:hidden;z-index:1;background:var(--bg1);--bg1:#000 url('https://s3.bmp.ovh/2026/08/25/q4qzgNj9.jpg') no-repeat center/cover;--state:running;}
#btnFs{right:3%;top:30px;color:#fff;font-size:20px;}
#btnFs:hover{font-style:italic;}
#lrc{left:25px;top:25px;background:linear-gradient(45deg, #0000CD 32%,#F0F8FF 43%,#FFFFE0 52%,#DC143C 62%,#FFFF00 75%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;font:bold 3.8em 'Long Cang','ZCOOL KuaiLe','华文琥珀',STLiti,"宋体","SimSun","Microsoft YaHei",sans-serif !important;}
#lrc::before {background: linear-gradient(180deg,#4dd0e1dd,#00bfff99) !important;background-clip: text !important;-webkit-background-clip: text !important;color: transparent !important;}
#bg-carousel{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;}
.bg-slide{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:0;pointer-events:none;transition:opacity 1.8s ease-in-out;will-change:opacity;}
.bg-slide.active{opacity:1;}
.bg-slide.paused{transition:none;}
.title-wrapper{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%)scale(0.85);z-index:10;transform‑origin:center center;padding:10px 28px;background:transparent;pointer-events:none;}
.song-title{position:absolute;font-size:5.8rem;font-weight:600;white-space:nowrap;font-family:STKaiti,'ZCOOL KuaiLe','Ma Shan Zheng','Long Cang',KaiTi,serif;letter-spacing:6px; filter: drop-shadow(#FFD700 1px 0 0) drop-shadow(#FFD700 0 1px 0) drop-shadow(#FFD700 -1px 0 0) drop-shadow(#FFD700 0 -1px 0);background:linear-gradient(45deg,#ff0000,#ff7f00,#00bfff,#ff00ff,#ff0000);background-size:700% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rainbowFlow 6s linear infinite,scale 12s ease infinite alternate var(--state);text-shadow:0 0 30px rgba(0,0,0,0.6);line-height:1.2;}
.song-title.paused{animation-play-state:paused;}
@keyframes rainbowFlow{0%{background-position:0% 50%;}100%{background-position:100% 50%;}}
#msvg { position: absolute;left:25px;bottom:25px; width: 10vw; height: 10vw;cursor: pointer; animation:spinPlayBtn 6s linear infinite;}
#msvg:hover { filter: invert(1);transition: 0.6s;}
#msvg.paused {animation-play-state:paused;}
@keyframes spinPlayBtn{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
.vid{position:absolute;top:-10%;left:-10%;width:120%;height:120%;object-fit:cover;mix-blend-mode:screen;opacity:0.2;z-index:1;pointer-events:none;}
.vid1{position:absolute;top:0%;left:0%;width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;opacity:0.5;z-index:1;pointer-events:none;}
.bottom-control{position:absolute;bottom:30px;right:30px;z-index:10;display:flex;align-items:flex-end;gap:14px;padding:6px 16px 6px 14px;background:transparent !important;pointer-events:auto;}
.prog-wrap{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;flex:1;min-width:280px;}
.prog-time{font-size:20px;font-family:'Consolas',monospace;color:#99CC99;letter-spacing:0.5px;text-shadow:0 0 10px rgba(0,0,0,0.5);text-align:center;}
.prog-bar{width:100%;height:3px;background:#0099CC;border-radius:2px;cursor:pointer;position:relative;}
.prog-fill{height:100%;width:0%;background:linear-gradient(90deg,#ff8844,#ff6b35);border-radius:2px;box-shadow:0 0 10px rgba(255,100,50,0.15);transition:width 0.08s linear;}
@keyframes scale{0%{transform:translateX(-50%) perspective(800px) rotateY(0deg) scale(0.01);}20%{transform:translateX(-50%) perspective(800px) rotateY(0deg) scale(1);}40%{transform:translateX(-50%) perspective(800px) rotateY(-2deg) scale(1.2);}60%{transform:translateX(-50%) perspective(800px) rotateY(2deg) scale(1.2);}80%{transform:translateX(-50%) perspective(800px) rotateY(0deg) scale(1);}100%{transform:translateX(-50%) perspective(800px) rotateY(0deg) scale(0.01);}}
</style>
</head>
<body>
<div id="papa">
<audio id="aud" autoplay playsinline></audio>
<div id="lrc" data-lrc="家乡变故乡">家乡变故乡</div>
<div id="bg-carousel">
<div class="bg-slide active" style="background-image: url('https://s3.bmp.ovh/2026/08/25/DoJglgc4.jpg');"></div>
<div class="bg-slide" style="background-image: url('https://s3.bmp.ovh/2026/08/25/gAuikWYD.jpg');"></div>
<div class="bg-slide" style="background-image: url('https://s3.bmp.ovh/2026/08/25/RAawNCj8.jpg');"></div>
<div class="bg-slide" style="background-image: url('https://s3.bmp.ovh/2026/08/25/8Jg6iMco.jpg');"></div>
<div class="bg-slide" style="background-image: url('https://s3.bmp.ovh/2026/09/01/0wxghR0L.jpg');"></div>
<div class="bg-slide" style="background-image: url('https://s3.bmp.ovh/2026/08/25/pl8uIDQJ.jpg');"></div>
<div class="bg-slide" style="background-image: url('https://s3.bmp.ovh/2026/08/25/q4qzgNj9.jpg');"></div>
</div>
<video class ="vid" src="https://img2.tukuppt.com/video_show/2418175/00/02/22/5b52de8ec8111.mp4" autoplay loop preload="auto" playsinline muted></video>
<video class ="vid1" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/0b04551c7ce54a3575277d93c0885dfc_preview.mp4" autoplay loop preload="auto" playsinline muted></video>
<svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400"><title>播放/暂停</title></svg>
<div class="title-wrapper">
<div class="song-title">✨家乡变故乡✨</div>
</div>
<div class="bottom-control">
<div class="prog-wrap">
<div class="prog-time" id="progTime">0:00 / 0:00</div>
<div class="prog-bar" id="progBar" title="调整进度">
<div class="prog-fill" id="progFill"></div>
</div>
</div>
</div>
</div>
<script type="module">
const msvg = document.getElementById('msvg');
      loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', tzRun);
   function tzRun() {
   var dr = _dr(msvg);
   dr.g('g1').set('class', 'rotate');
   .forEach(y => {
         var c = Math.random().toString(16).substring(2, 8);
         dr.circle(0, y, 12, `#${c}`).addTo('g1').rotates(8);
   });
}
function loadJs(url, callback) {
   var script = document.createElement('script');
   script.charset = 'utf-8';
   script.src = url;
   script.onload = function() {
         if (callback) callback();
   };
   document.head.appendChild(script);
}
import { FS } from 'https://638183.freep.cn/638183/web/js/svglz_fs.js';
import lrc from 'https://638183.freep.cn/638183/web/lrc/yslrc-only.js';
const papa = document.getElementById('papa');
const vids = document.querySelectorAll('video');
const audio = document.getElementById('aud');
audio.src = 'http://cccimg.com/view.php/6df561258df51735e526655d6c897c57.mp3';
audio.loop = true;
audio.volume = 1.0;
audio.preload = 'auto';
FS(papa, '', '');
var geci = `
家乡变故乡
杨仪波
背着行囊踏过破晓的霜
以为远方能圆年少的谎
老街的月光还照在老墙
我却转身奔向了流浪
岁月匆忙染白鬓角风霜
回头一望只剩模糊模样
儿时的玩伴各散了四方
炊烟袅袅再等不回我归航
少小离家鬓已秋霜
乡音未改人事已沧桑
门前老树还在守望
我归来时只剩空巷
曾经的家乡变成了故乡
风一吹过全都是过往
推开旧门尘灰落满窗
声声犬吠不识旧儿郎
爹娘的呼唤只留在梦乡
庭院荒芜长满了惆怅
少小离家鬓已秋霜
乡音未改人事已沧桑
门前老树还在守望
我归来时只剩空巷
曾经的家乡变成了故乡
风一吹过全都是过往
以为归来就能安放过往
原来时光早已拆了围墙
物是人非只剩我回望
半生漂泊换一身沧桑
乡音依旧故土已凉
我站在这里轻声讲
我的家乡早变成故乡
`;
lrc(papa, geci, 0, 0);
(function() {
         const slides = document.querySelectorAll('.bg-slide');
         let currentIndex = 0;
         const totalSlides = slides.length;
         let slideInterval = null;
         let isCarouselPaused = false;
         function showSlide(index) {
            slides.forEach((slide, i) => {
               slide.classList.toggle('active', i === index);
            });
         }
         function nextSlide() {
            if (isCarouselPaused) return;
            currentIndex = (currentIndex + 1) % totalSlides;
            showSlide(currentIndex);
         }
         function startCarousel() {
            if (slideInterval) {
               clearInterval(slideInterval);
               slideInterval = null;
            }
            slides.forEach((slide, i) => {
               slide.classList.toggle('active', i === currentIndex);
            });
            slideInterval = setInterval(nextSlide, 14000);
            isCarouselPaused = false;
         }
         function pauseCarousel() {
            isCarouselPaused = true;
            if (slideInterval) {
               clearInterval(slideInterval);
               slideInterval = null;
            }
            slides.forEach(slide => {
               slide.classList.add('paused');
            });
         }
         function resumeCarousel() {
            isCarouselPaused = false;
            slides.forEach(slide => {
               slide.classList.remove('paused');
            });
            if (slideInterval) {
               clearInterval(slideInterval);
               slideInterval = null;
            }
            slideInterval = setInterval(nextSlide, 10000);
         }
         window.bgCarousel = {
            start: startCarousel,
            pause: pauseCarousel,
            resume: resumeCarousel,
            isPaused: function() { return isCarouselPaused; }
         };
         startCarousel();
   })();

const titleEl = document.querySelector('.song-title');
const progFill = document.getElementById('progFill');
const progTime = document.getElementById('progTime');
const progBar = document.getElementById('progBar');
let isPlaying = true;
function setAllAnimations(isplaying) {
if (isplaying) {
   bgCarousel.resume();vids.forEach(vid => vid.play());
   msvg.classList.remove('paused');
   titleEl.classList.remove('paused');
} else {
   bgCarousel.pause(); vids.forEach(vid =>vid.pause());
   msvg.classList.add('paused');
   titleEl.classList.add('paused');
}
papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
}
function togglePlay() {
if (isPlaying) {
   audio.pause();
   isPlaying = false;
} else {
   audio.play();
   isPlaying = true;
}
setAllAnimations(isPlaying);
}
msvg.addEventListener('click', function(e) {
e.stopPropagation();
togglePlay();
});
function formatTime(seconds) {
         if (isNaN(seconds) || !isFinite(seconds)) return '0:00';
         const mins = Math.floor(seconds / 60);
         const secs = Math.floor(seconds % 60);
         return `${mins}:${secs < 10 ? '0' + secs : secs}`;
   }
   function updateTimeDisplay() {
         const current = audio.currentTime || 0;
         const duration = audio.duration || 0;
         progTime.textContent = `${formatTime(current)} / ${formatTime(duration)}`;
         if (duration > 0) {
            progFill.style.width = `${(current / duration) * 100}%`;
         }
   }
      progBar.addEventListener('click', function(e) {
         if (!audio.duration) return;
         const rect = this.getBoundingClientRect();
         const percent = (e.clientX - rect.left) / rect.width;
         audio.currentTime = percent * audio.duration;
         updateTimeDisplay();
   });
   audio.addEventListener('loadedmetadata', function() {
         updateTimeDisplay();
   });
   audio.addEventListener('timeupdate', updateTimeDisplay);
   audio.addEventListener('ended', function() {
         audio.currentTime = 0;
         audio.play().then(() => {
            isPlaying = true;
            setAllAnimations(true);
         }).catch(() => {
            isPlaying = false;
            setAllAnimations(false);
         });
   });
setAllAnimations(isPlaying);
['contextmenu', 'dragstart','selectstart'].forEach(type =>
document.getElementById('papa').addEventListener(type, e => e.preventDefault()));
</script>
</body>
</html>

梦江南 发表于 2026-9-1 13:25

{:4_174:}沙发

梦江南 发表于 2026-9-1 13:27

欣赏杨帆带来的精彩音画，歌词很赞，歌曲深情。问好！{:4_187:}

梦油发表于 2026-9-1 14:18

故乡，那片绿意盎然的山水，如诗如画，永远牵挂着游子的心。
问好杨帆朋友。

杨帆发表于 2026-9-1 18:20

梦江南发表于 2026-9-1 13:27
欣赏杨帆带来的精彩音画，歌词很赞，歌曲深情。问好！

谢谢江南鼓励，祝秋安{:4_187:}

杨帆发表于 2026-9-1 18:25

梦油发表于 2026-9-1 14:18
故乡，那片绿意盎然的山水，如诗如画，永远牵挂着游子的心。
问好杨帆朋友。

是啊，这几张照片刻入我童年生活的美好记忆，没齿难忘~谢谢梦兄雅评与问候{:4_190:}

梦油发表于 2026-9-1 18:36

杨帆发表于 2026-9-1 18:25
是啊，这几张照片刻入我童年生活的美好记忆，没齿难忘~谢谢梦兄雅评与问候

杨帆朋友别客气。

小辣椒 发表于 2026-9-1 21:25

杨帆这个制作生活气息浓厚，非常棒！{:4_187:}

小辣椒 发表于 2026-9-1 21:26

这个枫叶播放器最好换个位置。现在这个中间的文字出来会有点遮挡

小辣椒 发表于 2026-9-1 21:28

杨帆代码进步很大，再接再厉！小辣椒欣赏加学习。{:4_187:}

杨帆发表于 2026-9-1 22:09

小辣椒发表于 2026-9-1 21:28
杨帆代码进步很大，再接再厉！小辣椒欣赏加学习。

问好小辣椒，我是凭兴趣鼓捣着玩呢，向你学习，感谢鼓励与指导{:4_204:}

小辣椒 发表于 2026-9-1 22:14

杨帆发表于 2026-9-1 22:09
问好小辣椒，我是凭兴趣鼓捣着玩呢，向你学习，感谢鼓励与指导

杨帆谦虚了，你可以把标题移动下面一点，这样不会遮挡枫叶播放器，或者把播放器移动一下位置

杨帆发表于 2026-9-1 23:07

小辣椒发表于 2026-9-1 22:14
杨帆谦虚了，你可以把标题移动下面一点，这样不会遮挡枫叶播放器，或者把播放器移动一下位置

好，刚换成了马老师的最新播放器。谢谢马老师，谢谢小辣椒{:4_204:}

红影发表于 2026-9-2 00:02

很有特点的制作，欣赏扬帆好帖{:4_199:}

偶然~ 发表于 2026-9-2 07:51

来欣赏杨帆老师的精品佳作！

偶然~ 发表于 2026-9-2 07:51

感谢杨帆老师带来的精彩，辛苦了！祝你开心幸福、阖家安康！

偶然~ 发表于 2026-9-2 07:51

晨光漫过窗沿，问候先到你跟前。愿杨帆老师无琐事挂怀，散步有风，闲坐有茶，日日舒坦。

杨帆发表于 2026-9-2 08:28

红影发表于 2026-9-2 00:02
很有特点的制作，欣赏扬帆好帖

谢谢影子鼓励，该贴用到了了子老师分享作品代码，在此一并表示感谢{:4_190:}

杨帆发表于 2026-9-2 08:31

偶然~ 发表于 2026-9-2 07:51
晨光漫过窗沿，问候先到你跟前。愿杨帆老师无琐事挂怀，散步有风，闲坐有茶，日日舒坦。

问好偶然~，谢谢兄弟雅评、祝福与鼓励{:4_190:}

偶然~ 发表于 2026-9-2 08:55

杨帆发表于 2026-9-2 08:31
问好偶然~，谢谢兄弟雅评、祝福与鼓励

笑着开启新的一天，烦心事尽数消散，顺心小事常来，年年吉祥如意。杨帆早安！

页: [1] 2

花潮论坛's Archiver

故乡回望