寒冬残荷 发表于 2025-12-24 19:52

【万象更新】七律《空谷幽梦》

本帖最后由 寒冬残荷 于 2025-12-24 22:21 编辑 <br /><br /><style>
#pa{margin-top:30px; left:calc(50% - 81px); transform:translateX(-50%); background: #000 url('https://pic1.imgdb.cn/item/694bc2fb26657af64c6d1b9f.png') no-repeat center/cover; width:clamp(600px,90vw,1400px); min-height:80vh; aspect-ratio:16/9; overflow:hidden; position: relative; display:grid; place-items:center; perspective:1000px; user-drag:none; user-select:none; --state:running; z-index:1; border:#d0d0d0 15px inset; border-top:#e0e0e0 15px inset; border-bottom:#adadad 15px inset; }

#vid {position: absolute; width: 100%; height: 100%; object-fit: cover; mask: radial-gradient(circle at 92% 10%, transparent, transparent 7.5%, red); -webkit-mask: radial-gradient(circle at 92% 10%, transparent, transparent 7.5%, red); opacity: 0.2; z-index: 0; pointer-events: none;}

#fullscreen {position:absolute; left:3%; top:40px; width:42px; height:42px; cursor:pointer; opacity:0; transition:opacity 0.3s ease; z-index:8; }
#pa:hover #fullscreen {opacity:1;}
#qping {width:42px; height:42px; position:absolute; background:url('https://pic1.imgdb.cn/item/6940e1b60dd29e7e22418751.png')no-repeat center/cover; opacity:1; }
#tchu {width:42px; height:42px; position:absolute; opacity:0; background:url('https://pic1.imgdb.cn/item/6940e1fb0dd29e7e22418802.png')no-repeat center/cover; opacity: 1;}

#wenzi{position:absolute; left:7%; top:15%; width:400px; height:auto; font:bold 28px 楷体, NSimSun, 'Microsoft YaHei'; color:lightblue; line-height:40px; letter-spacing:2px; text-align:left; perspective-origin:top left; transform-origin:center center 15px; z-index:10; --state:running;-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);}

#mypic {position: absolute;right: 40px;bottom: 40px;width: 40px;height: 40px;cursor: pointer; animation: rot 5s linear infinite var(--state);z-index: 15;}
#mypic:hover {animation-play-state: paused; filter:brightness(2) hue-rotate(300deg); scale:1.2; }
@keyframes rot {to {transform:rotate(360deg); filter:hue-rotate(90deg); } }

#lrcgc {position:absolute; padding:0px; font:bold 25px/40px sans-serif; text-shadow: 1px 1px 1px gray; letter-spacing:4px; color: skyblue; white-space:pre; z-index: 12; -webkit-background-clip:text; filter:drop-shadow(#FFFFFF 2px 0 0) drop-shadow(#FFFFFF 0 2px 0) drop-shadow(#FFFFFF -2px 0 0) drop-shadow(#FFFFFF 0 -2px 0); width:100%; height: 40px; text-align:center; bottom:30px; left:0; border: 0px solid #000;}
</style>

<div id="pa">
<video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/08/33/5d1dc3c81d4e1.mp4" autoplay loop muted></video>
<span id="fullscreen" title="全屏/退出">
<div id="qping"></div>
<div id="tchu"></div>
</span>

<div id="wenzi"></div>
<img id="mypic" alt="" src="https://pic1.imgdb.cn/item/692d522dc2ca2fe15cef17c0.png" />
<div id="lrcgc">歌曲《空谷幽梦》</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=440357821" autoplay="autoplay" loop="loop"></audio>
</div>

<div style="height:208px;"></div>

<script language="javascript">
// 1. 获取DOM元素（需确保页面有对应id的元素）
const wenzi = document.getElementById("wenzi");
const aud = document.getElementById("aud");
const mypic = document.getElementById("mypic");
const vid = document.getElementById("vid"); // 补充视频元素（避免未定义报错）
const bjtu = document.getElementById("bjtu"); // 补充背景元素（避免未定义报错）
var idx = 0; // 打字机当前索引（核心：暂停时保留该值）
var str = "七律《空谷幽梦》<br><br>月遗荒徼踏云来，<br>翠巘留白隔世苔。<br>幽兰冒雪凝星眸，<br>彩蝶翻风散劫灰。<br><br>琴穿万籁温眉黛，<br>梦越千春改玉台。<br>浮生一幻终成偈，<br>青山长对故人回。<br>";
var textTimer = null; // 打字机定时器（初始化为null，方便管理）
// 2. 封装打字机核心函数（复用+统一逻辑）
function startTyping(speed) {
// 先清除旧定时器，避免叠加
if (textTimer) clearInterval(textTimer);
// 重启定时器：从当前idx位置继续打字
textTimer = setInterval(() => {
// 边界判断：如果索引超出字符串长度，重置为0（保证循环）
if (idx > str.length) {
idx = 0;
}
// 逐字显示+光标
wenzi.innerHTML = str.substring(0, idx) + "|";
idx += 1; // 索引自增
}, speed);
}
// 3. 初始化：启动打字机（200ms/字符）
startTyping(200);
// 4. 图片点击：播放/暂停控制（核心修复）
mypic.onclick = () => {
// 控制音频/视频播放（容错：vid不存在则只处理aud）
if (aud.paused) {
aud.play().catch(err => console.log("音频播放失败：", err));
vid && vid.play().catch(err => console.log("视频播放失败：", err));
} else {
aud.pause();
vid && vid.pause();
}
// 更新样式和标题
mypic.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mypic.title = aud.paused ? '播放' : '暂停';
// 暂停逻辑：只清除定时器，保留idx
if (aud.paused) {
clearInterval(textTimer);
textTimer = null; // 标记定时器已停止
bjtu && bjtu.style.setProperty('--display', 'none');
} else {
// 播放逻辑：重启打字机（从暂停的idx位置继续）
bjtu && bjtu.style.setProperty('--display', '');
startTyping(400); // 重启打字机（速度改为400ms/字符）
}
};
// 初始标题
mypic.title = '暂停';
mypic.title = '暂停'; let fs = true;let fsTimer;
fullscreen.onclick = () => {fs ? (pa.requestFullscreen(), qping.style.opacity = '0', tchu.style.opacity = '1') : (document.exitFullscreen(), qping.style.opacity = '1', tchu.style.opacity = '0');fs = !fs;}
pa.addEventListener('mousemove', () => { clearTimeout(fsTimer); fullscreen.style.opacity = '1'; fsTimer = setTimeout(() => { fullscreen.style.opacity = '0'; }, 3000); });
</script>

<script>
const gc = `作词:素昭\n作曲:深度ys\n演唱：LINGAN/好大一条鱼\n月色被遗落在城外 踏云入梦而来\n再借青山缀点这隔世留白\n幽兰在寒雪里初开 映她眸中星海\n身后是蝶舞万千华彩\n记忆在长眠后醒来 拂去尘埃\n不知山河如故盛世已改\n琴音透过无声万籁 温柔眉黛\n轻叹 感慨\n穿越又一轮生死明灭（踏碎一场镜花水月）\n辗转三千年历史更迭（看遍人间阴晴圆缺）\n才得以破茧成蝶 才得以入梦赴约\n飞越万载诗篇 她终于在指尖 挽歌告别\n\n夜色被临摹成绝代 踏云入梦而来\n满纸荒唐爱恨被岁月深埋\n幽昙似惊鸿曾入怀 转瞬只剩苍白\n远方是晚歌无悲无哀\n遗憾在陌路中释怀 覆上青苔\n回首又见故里苍松月白\n琴声透过无垠沧海 清风为待\n如他归来\n穿越又一轮生死明灭（踏碎一场镜花水月）\n辗转三千年历史更迭（看遍人间阴晴圆缺）\n才得以破茧成蝶 才得以入梦赴约\n春风融化缘劫 才终于在指尖 挽歌告别\n穿越九万里山川旷野（等过一场花开花谢）\n遇见三千丈月光初雪（仿佛从容刻入眉睫）\n才得以破茧成蝶 才得以入梦赴约\n回头遥望一眼 看古老的传言 淡成云烟\n而这浮生一梦 不过幻觉\n谢谢欣赏！`;
const gcAr = lrc2HC(gc);
let curkey = 0, isSeeking = false;
aud.ontimeupdate = () => {
if(curkey > gcAr.length - 1) return;
if(aud.currentTime >= gcAr) {
const gap = gcAr?. ?? 0 - gcAr;
showLrc(gcAr, lrcgc, gap);
}
};
aud.onended = () => {
curkey = 0;
aud.play();
}
aud.onseeked = () => calcKey();
function lrc2HC(text) {
let lrcAr = [];
let ar = text.trim().split('\n');
ar.sort();
let reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
if(reg.test(item)) {
let result = item.match(reg);
let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
lrcAr.push(.trim()]);
}
});
return lrcAr ? lrcAr : ;
};
function calcKey() {
for (let j = 0; j < gcAr.length; j++) {
if (aud.currentTime <= gcAr) {
curkey = j - 1;
break;
}
}
if (curkey < 0) curkey = 0;
if (curkey > gcAr.length - 1) curkey = gcAr.length - 1;
let time = gcAr?. ?? 0 - gcAr;
isSeeking = false;
showLrc(gcAr, lrcgc, time);
}
function showLrc(str, targetElm, time) {
if(isSeeking) return;
targetElm.innerHTML = '';
const chars = str.split('').map(c => c === ' ' ? ' ' : c);
const frg = document.createDocumentFragment();
chars.forEach((char, idx) => {
const span = document.createElement('span');
span.innerHTML = char;
span.classList.add('char');
const x = Math.random() * (Math.random() > 0.5 ? 300 : -300);
const y = Math.random() * (Math.random() > 0.5 ? 300 : -300);
span.style.cssText += `
color: skyblue;
--x: ${x}px;
--y: ${y}px;
--delay: ${Math.random() * 0.5}s;
`;
frg.appendChild(span);
});
targetElm.appendChild(frg);
curkey ++;
setTimeout(() =>isSeeking = false, time);
}
</script>

寒冬残荷 发表于 2025-12-24 19:53

这是我今天用豆包AI为歌曲《空谷幽梦》所写的古诗和所配的图片。

樵歌 发表于 2025-12-24 20:55

诗的意境和图片的意境非常契合！特别是图图很有灵气。{:4_199:}

寒冬残荷 发表于 2025-12-24 21:23

本帖最后由 寒冬残荷 于 2025-12-24 21:26 编辑

樵歌 发表于 2025-12-24 20:55
诗的意境和图片的意境非常契合！特别是图图很有灵气。
谢谢赏评！

自我感觉还可以{:5_106:}。青山、空谷、彩蝶、云朵、幽兰、古琴、月亮、人物等主要元素都给我制作出来了。

音乐、诗歌、图片三体契合。

红影 发表于 2025-12-24 22:28

这图图制作漂亮，诗句也很美。歌曲好听。
欣赏寒冬残荷好帖{:4_199:}

樵歌 发表于 2025-12-25 08:03

寒冬残荷 发表于 2025-12-24 21:23
谢谢赏评！

自我感觉还可以。青山、空谷、彩蝶、云朵、幽兰、古琴、月亮、人物等主要元素都 ...

这个虽然AI非常强大，，但人的因素是决定性的。

偶然~ 发表于 2025-12-25 09:00

寒冬残荷这个制作厉害

{:4_199:}

偶然~ 发表于 2025-12-25 09:00

大气古典

偶然~ 发表于 2025-12-25 09:01

早上好！新的一天，愿寒冬残荷阳光满路，温暖如初。忙碌之余，也别忘了照顾好自己。喝杯水，歇一歇。

小九 发表于 2025-12-25 11:09

这是一幅高制作的画面，意境深远，音乐也配的好，特别喜欢那对蝴蝶和兰花。 欣赏寒冬残荷的作品。{:4_187:}

寒冬残荷 发表于 2025-12-25 11:24

歌曲《空谷幽梦》歌词
月色被遗落在城外，踏云入梦而来。
再借青山缀点这隔世留白。
幽兰在寒雪里初开，映她眸中星海。
身后是蝶舞万千华彩。
记忆在长眠后醒来，拂去尘埃。
不知山河如故盛世已改。
琴音透过无声万籁，温柔眉黛，
轻叹 感慨。
穿越又一轮生死明灭
踏碎一场镜花水月
辗转三千年历史更迭
看遍人间阴晴圆缺
才得以破茧成蝶，才得以入梦赴约。
飞越万载诗篇，她终于在指尖，挽歌告别。
夜色被临摹成绝代，踏云入梦而来，
满纸荒唐爱恨被岁月深埋。
幽昙似惊鸿曾入怀，转瞬只剩苍白，
远方是晚歌无悲无哀。
遗憾在陌路中释怀，覆上青苔。
回首又见故里苍松月白。
琴声透过无垠沧海，清风为待，
如他归来。
穿越又一轮生死明灭
踏碎一场镜花水月
辗转三千年历史更迭
看遍人间阴晴圆缺
才得以破茧成蝶，才得以入梦赴约。
春风融化缘劫，才终于在指尖，挽歌告别。
穿越九万里山川旷野
等过一场花开花谢
遇见三千丈月光初雪
仿佛从容刻入眉睫
才得以破茧成蝶，才得以入梦赴约。
回头遥望一眼，看古老的传言，淡成云烟。
而这浮生一梦，不过幻觉。
月色被遗落在城外，踏云入梦而来。
再借青山缀点这隔世留白。
幽兰在寒雪里初开，映她眸中星海。
身后是蝶舞万千华彩。
记忆在长眠后醒来，拂去尘埃。
不知山河如故盛世已改。
琴音透过无声万籁，温柔眉黛，
轻叹 感慨。
穿越又一轮生死明灭
踏碎一场镜花水月
辗转三千年历史更迭
看遍人间阴晴圆缺
才得以破茧成蝶，才得以入梦赴约。
飞越万载诗篇，她终于在指尖，挽歌告别。
夜色被临摹成绝代，踏云入梦而来，
满纸荒唐爱恨被岁月深埋。
幽昙似惊鸿曾入怀，转瞬只剩苍白，
远方是晚歌无悲无哀。
遗憾在陌路中释怀，覆上青苔。
回首又见故里苍松月白。
琴声透过无垠沧海，清风为待，
如他归来。
穿越又一轮生死明灭
踏碎一场镜花水月
辗转三千年历史更迭
看遍人间阴晴圆缺
才得以破茧成蝶，才得以入梦赴约。
春风融化缘劫，才终于在指尖，挽歌告别。
穿越九万里山川旷野
等过一场花开花谢
遇见三千丈月光初雪
仿佛从容刻入眉睫
才得以破茧成蝶，才得以入梦赴约。
回头遥望一眼，看古老的传言，淡成云烟。
而这浮生一梦，不过幻觉。

寒冬残荷 发表于 2025-12-25 11:26

偶然~ 发表于 2025-12-25 09:00
寒冬残荷这个制作厉害

谢谢偶然管管的赏评！祝幸福安康！

寒冬残荷 发表于 2025-12-25 11:28

小九 发表于 2025-12-25 11:09
这是一幅高制作的画面，意境深远，音乐也配的好，特别喜欢那对蝴蝶和兰花。 欣赏寒冬残荷的作品。
谢谢小九管管的赏评！祝幸福安康！

根据歌词的意境写好提示词让豆包生成的古诗和图片。有了AI，人人都会吟诗作画了！{:5_106:}

寒冬残荷 发表于 2025-12-25 11:32

樵歌 发表于 2025-12-25 08:03
这个虽然AI非常强大，，但人的因素是决定性的。

根据歌词的意境写好提示词让豆包生成的古诗和图片。当然要“抽卡”，AI所得的不一定符合自己的要求，多修改提示词，反复生成几次。

有了AI，人人都会吟诗作画了！

偶然~ 发表于 2025-12-25 12:31

寒冬残荷 发表于 2025-12-25 11:26
谢谢偶然管管的赏评！祝幸福安康！

新的一天，愿你阳光满路，温暖如初。忙碌之余，也别忘了照顾好自己。喝杯水，歇一歇。

樵歌 发表于 2025-12-26 11:31

寒冬残荷 发表于 2025-12-24 21:23
谢谢赏评！

自我感觉还可以。青山、空谷、彩蝶、云朵、幽兰、古琴、月亮、人物等主要元素都 ...

是的，应该有的物象都升华了，有灵气了。很赞！
页: [1]
查看完整版本: 【万象更新】七律《空谷幽梦》