家乡变故乡

杨帆发表于 2026-8-26 20:42

本帖最后由杨帆于 2026-8-26 22:21 编辑 <br /><br /><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>家乡变故乡</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=Long+Cang&family=Ma+Shan+Zheng&family=ZCOOL+KuaiLe&family=ZCOOL+QingKe+HuangYou&display=swap");
@import 'https://638183.freep.cn/638183/web/tz/tz.v5.css';
#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;--state:running;background:#000;}
.vid{position:absolute;top:-10%;left:-10%;width:120%;height:120%;object-fit:cover;mix-blend-mode:screen;opacity:0.8;z-index:1;pointer-events:none;}
#mutedbnt{position:absolute;z-index:25;width:80px;height:80px;bottom:5%;left:80%;cursor:pointer;object-fit:contain;}
.loop-img-container{position:absolute;width:100%;height:100%;z-index:0;animation:totalCycle 65s infinite linear;animation-play-state:var(--state);}
@keyframes totalCycle{0%,100%{transform:translate(0);}}
.loop-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;mask:url("https://pic1.imgdb.cn/i/0347Idy38SXalwDqQlOS2r.png") no-repeat center/85% 85%;-webkit-mask:url("https://pic1.imgdb.cn/i/0347Idy38SXalwDqQlOS2r.png") no-repeat center/85% 85%;transition:opacity 0.4s ease;animation:16s infinite cubic-bezier(0.34,1.56,0.64,1);transform:translateZ(0);background-blend-mode:soft-light;backface-visibility:hidden;animation-play-state:var(--state);}
@keyframes img1Anim{0%{opacity:0;transform:rotateY(180deg) scale(0.8);}15%{opacity:1;transform:rotateY(0) scale(1);}75%{opacity:1;transform:rotateY(0) scale(1);}90%{opacity:0;transform:rotateY(-180deg) scale(0.8);}100%{opacity:0;}}
@keyframes img2Anim{0%{opacity:0;transform:scale(0.5);filter:saturate(0);}15%{opacity:1;transform:scale(1);filter:saturate(1.2);}25%{transform:scale(1.05);}35%{transform:scale(1);}75%{opacity:1;transform:scale(1);filter:saturate(1.2);}90%{opacity:0;transform:scale(0.5);filter:saturate(0);}100%{opacity:0;}}
@keyframes img3Anim{0%{opacity:0;clip-path:circle(0% at center);}15%{opacity:1;clip-path:circle(50% at center);}75%{opacity:1;clip-path:circle(50% at center);}90%{opacity:0;clip-path:circle(0% at center);}100%{opacity:0;}}
@keyframes img4Anim{0%{opacity:0;transform:translateX(-100%) skewX(-15deg);}10%{transform:translateX(-50%) skewX(10deg);}15%{opacity:1;transform:translateX(0) skewX(0);}75%{opacity:1;transform:translateX(0) skewX(0);}85%{transform:translateX(50%) skewX(-10deg);}90%{opacity:0;transform:translateX(100%) skewX(15deg);}100%{opacity:0;}}
@keyframes img5Anim{0%{opacity:0;filter:drop-shadow(0 0 20px rgba(255,255,255,0)) brightness(0);}5%{opacity:0.3;filter:drop-shadow(0 0 20px rgba(255,255,255,0.8)) brightness(1.5);}10%{opacity:0.7;filter:drop-shadow(0 0 10px rgba(255,255,255,0.5)) brightness(1.2);}15%{opacity:1;filter:drop-shadow(0 0 5px rgba(255,255,255,0.3)) brightness(1);}75%{opacity:1;filter:drop-shadow(0 0 5px rgba(255,255,255,0.3)) brightness(1);}85%{opacity:0.3;filter:drop-shadow(0 0 20px rgba(255,255,255,0.8)) brightness(1.5);}90%{opacity:0;filter:drop-shadow(0 0 20px rgba(255,255,255,0)) brightness(0);}100%{opacity:0;}}
.img1{animation-name:img1Anim;animation-delay:0s;}
.img2{animation-name:img2Anim;animation-delay:13s;}
.img3{animation-name:img3Anim;animation-delay:26s;}
.img4{animation-name:img4Anim;animation-delay:39s;}
.img5{animation-name:img5Anim;animation-delay:52s;}
#bgLayer{position:absolute;inset:0;z-index:-1;}
#intro{margin:0;z-index:1;width:100%;height:100%;position:absolute;background-color:#220080;background-size:cover;opacity:0.6;mix-blend-mode:soft-light;animation:hue-rotate 6s linear infinite var(--state);}
@keyframes hue-rotate{0%{filter:hue-rotate(-360deg);}100%{filter:hue-rotate(360deg);}}
.pa { position: absolute; font-size: 2.5vw; font-weight: bold; writing-mode: vertical-rl; text-orientation: upright; letter-spacing: 20px; text-shadow: 2px 2px 4px rgba(0, 200, 0, .15); filter: drop-shadow(2px 2px 4px lightgreen); background:linear-gradient(180deg, cyan, white) no-repeat 0 0 / 100% 10%; background-clip: text; -webkit-background-clip: text; color: rgba(250, 250, 250, .25); animation: bmove 6s linear infinite var(--state); clip-path: inset(0.4px);}
:fullscreen .pa { filter: none; pointer-events: none; }
:-webkit-full-screen .pa { filter: none; pointer-events: none;}
@keyframes bmove { to { background-position: 0 100%; }}
</style>
</head>
<body>
<div id="papa">
<div id="bgLayer"></div>
<div id="intro"></div>
<div class="pa">家乡变故乡</div>
<video class ="vid" src="https://video-qn.51miz.com/preview/video/00/00/13/09/V-130942-864B05CF.mp4" autoplay loop preload="auto" playsinline muted></video>
<video class ="vid" src="https://img2.tukuppt.com/video_show/2269348/00/17/44/5ec497a38f522.mp4" autoplay loop preload="auto" playsinline muted></video>
<img src="https://pic.imgdb.cn/item/675813f6d0e0a243d4e14a48.png" id="mutedbnt" title="暂停" onClick="pc()"/>
<div class="loop-img-container">
         <img src="https://s3.bmp.ovh/2026/08/25/DoJglgc4.jpg" loading="lazy" class="loop-img img1">
         <img src="https://s3.bmp.ovh/2026/08/25/q4qzgNj9.jpg" loading="lazy" class="loop-img img2">
         <img src="https://s3.bmp.ovh/2026/08/25/8Jg6iMco.jpg" loading="lazy" class="loop-img img3">
         <img src="https://s3.bmp.ovh/2026/08/25/RAawNCj8.jpg" loading="lazy" class="loop-img img4">
         <img src="https://s3.bmp.ovh/2026/08/25/gAuikWYD.jpg" loading="lazy" class="loop-img img5">
   </div></div>
<script>
const gc = `家乡变故乡
杨仪波
背着行囊踏过破晓的霜
以为远方能圆年少的谎
老街的月光还照在老墙
我却转身奔向了流浪
岁月匆忙染白鬓角风霜
回头一望只剩模糊模样
儿时的玩伴各散了四方
炊烟袅袅再等不回我归航
少小离家鬓已秋霜
乡音未改人事已沧桑
门前老树还在守望
我归来时只剩空巷
曾经的家乡变成了故乡
风一吹过全都是过往
推开旧门尘灰落满窗
声声犬吠不识旧儿郎
爹娘的呼唤只留在梦乡
庭院荒芜长满了惆怅
少小离家鬓已秋霜
乡音未改人事已沧桑
门前老树还在守望
我归来时只剩空巷
曾经的家乡变成了故乡
风一吹过全都是过往
以为归来就能安放过往
原来时光早已拆了围墙
物是人非只剩我回望
半生漂泊换一身沧桑
乡音依旧故土已凉
我站在这里轻声讲
我的家乡早变成故乡
`;
function loadJs(url, callback) {
const script = document.createElement('script');
script.charset = 'utf-8';
script.src = url;
script.onload = function () {
   if (callback) callback();
};
document.head.appendChild(script);
}
loadJs('https://638183.freep.cn/638183/tzmaker/tz.v5.min.js', tzRun);
function tzRun() {
var tz = TZ('papa');
tz.add('audio', '', '', {src: 'http://cccimg.com/view.php/6df561258df51735e526655d6c897c57.mp3'});
tz.bgprog().style('bottom: 40px; left: 80px;color: #00BFFF; width: 240px;z-index:10;');
tz.fs().style('left: 20px; top: 20px;z-index:10;');
tz.lrc(tz.lrc2HC(gc), '', true).style('letter-spacing: 6px;font:3.2em "Ma Shan Zheng","华文行楷","SimHei","Arial","sans-serif"; top: 5%; right:5%; z-index:10;writing-mode: vertical-rl; text-orientation: upright; --rect: 0 0 100% 0; --border: 0;');
setTimeout(()=>{
   audioEl = papa.querySelector('audio');
},120);
}
const papa = document.getElementById('papa');
const vids = document.querySelectorAll('video');
const pa = document.querySelector('.pa');
const pic = document.getElementById("mutedbnt");
const fullscreen = document.querySelector('.fullscreen');
const bg1 = '#000 url("https://pic1.imgdb.cn/item/6a437895514f59159c649d21.png") no-repeat center/cover';
const bg2 = '#000 url("https://ln2018.oss-cn-hangzhou.aliyuncs.com/2026/1/bj.png") no-repeat center/cover';
bgLayer.style.background = bg1;
let audioEl = null;
function pc(){
if (!audioEl) return;
if (!audioEl.paused) {
   audioEl.pause();pic.title="播放";vids.forEach(vid =>vid.pause());
   pic.src = "https://pic.imgdb.cn/item/675813e7d0e0a243d4e14a18.png";
   bgLayer.style.background = bg2;papa.style.setProperty('--state','paused');
} else {
   audioEl.play(); pic.title="暂停";vids.forEach(vid => vid.play());papa.style.setProperty('--state', 'running');
   pic.src = "https://pic.imgdb.cn/item/675813f6d0e0a243d4e14a48.png";
   bgLayer.style.background = bg1;
}
pa.style.setProperty('--state', audioEl.paused ? 'paused' : 'running');
}
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
if (!audioEl.paused) audioEl.pause();
} else {
if (audioEl.paused && !audioEl.ended) audioEl.play().catch(()=>{});
}
});
window.pc = pc;
['contextmenu', 'dragstart','selectstart'].forEach(type =>
document.getElementById('papa').addEventListener(type, e => e.preventDefault())
);
</script>
</body>
</html>

杨帆发表于 2026-8-26 22:19

学习CSS高光游移文本效果，在此对马老师表示感谢{:4_180:}

霜染枫丹 发表于 2026-8-27 00:33

很有特色的佳作，为扬帆点赞！！{:4_204:}{:4_190:}

红影发表于 2026-8-27 16:05

漂亮的制作，很令人感慨的歌曲。欣赏扬帆好帖{:4_199:}

梦江南 发表于 2026-8-27 16:23

漂亮的画面特效，深情的歌曲，这中间的文字是高光吗？{:4_187:}

梦江南 发表于 2026-8-27 16:24

谢谢杨帆带来精彩的音画。{:4_204:}

杨帆发表于 2026-8-28 11:33

本帖最后由杨帆于 2026-8-28 12:10 编辑

霜染枫丹发表于 2026-8-27 00:33
很有特色的佳作，为扬帆点赞！！
时过境迁，物是人非，照片是我童年跟随姥姥生活学习的地方。谢谢枫丹老师关注与鼓励{:4_187:}

杨帆发表于 2026-8-28 11:39

红影发表于 2026-8-27 16:05
漂亮的制作，很令人感慨的歌曲。欣赏扬帆好帖

杨仪波的《家乡变故乡》深情感人，表达了游子对故乡变迁的感慨与思念。谢谢影子鼓励{:4_204:}

杨帆发表于 2026-8-28 11:41

梦江南发表于 2026-8-27 16:23
漂亮的画面特效，深情的歌曲，这中间的文字是高光吗？

对，尝试学习马老师的CSS高光游移文本效果。谢谢江南鼓励{:4_204:}

梦江南 发表于 2026-8-28 11:50

杨帆发表于 2026-8-28 11:41
对，尝试学习马老师的CSS高光游移文本效果。谢谢江南鼓励

杨帆是好样的！{:4_199:}

页: [1]

花潮论坛's Archiver

家乡变故乡