论坛 › 人机联合文学 › 夜与己 AI制图 大图滚动+2段诗歌

霜染枫丹 发表于 2025-12-30 01:54

夜与己 AI制图 大图滚动+2段诗歌

本帖最后由 霜染枫丹 于 2026-1-1 00:22 编辑 <br /><br /><style>
:root {--w:1800px;--h:820px;}
#oBlk {
    margin-left:50% ; left:calc(-0.5 * var(--w));
    margin-top:110px;
    width: var(--w);
    height: var(--h);
    box-shadow: 3px 3px 10px #000;
    overflow: hidden;
    position: absolute;
}

#oBlk::before,
#oBlk::after {
    position: absolute;
    content: '';
    left: var(--curX0);
    top: 0px;
    width: 100%;
    height: 100%;
    background: url('https://cccimg.com/view.php/7eaa4ca2ee6eaee833285cb4eb2f4706.jpg') no-repeat center / cover;
}

#oBlk::after {
    left: var(--curX1);
    transform: scaleX(-1);
}

/* 新增文字层样式 */
#poemText {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    font-size: 24px;
    text-align: center;
    width: 80%;
    line-height: 1.6;
    font-family: 'Microsoft YaHei', sans-serif;
    transition: opacity 0.5s ease;
}

/* 按钮样式 */
#poemButton {
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    background-color: rgba(0,0,0,0.6);
    color: white;
    border: 2px solid white;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
}

#poemButton:hover {
    background-color: rgba(255,255,255,0.8);
    color: black;
}

#comp {height:calc(var(--h) + 100px);}
</style>
<div id="oBlk">
<!-- 新增文字层 -->
<div id="poemText"></div>
<!-- 新增切换按钮 -->
<button id="poemButton">切换下一段</button>
</div>
<div id="comp"></div>
<script>
{
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d=k||e(c);k=}];e=function(){return'\\w+'};c=1;};while(c--)if(k)p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k);return p;}('5 4=6.g;5 7=1.0,8=0,2=0,3=4,b;5 9=()=>{2-=7;3-=7;a(2<=-4)2=4;a(3<=-4)3=4;8=3+(2>=0?1:-1);6.c.d(\'--2\',2+\'e\');6.c.d(\'--3\',8+\'e\');b=f(9)};9();',17,17,'||curX0|curX1|blkWidth|let|oBlk|step|tune|moving|if|raf|style|setProperty|px|requestAnimationFrame|offsetWidth'.split('|'),0,{}))
}

// 诗词库 - 现在包含全部四段诗
const poems = [
{
    title: "《夜与己》",
    content: [
       "(一）",
      "长夜的灯光温柔静谧&emsp;没有嘈杂的干扰",
      "我&emsp;做我自己 ",
      "长夜的心跳宁静&emsp;听得见血管中的潮汐",
      "我&emsp;做我自己"
    ]
},
{
    title: "《夜与己（二）》",
    content: [
      "秋夜的寒霜在菊花上轻舞&emsp; 写下数行心语",
      "心语&emsp;氤氲了菊的香气",
      "朔风吹落了菊的花瓣 &emsp; 吹不散心语的诗意",
      "留在了&emsp;冬夜的心里"
    ]
},
{
    title: "",
    content: [

    ]
},
{
    title: "",
    content: [

    ]
}
];

// 当前诗词索引
let currentPoemIndex = 0;
const poemText = document.getElementById('poemText');
const poemButton = document.getElementById('poemButton');

// 初始化显示第一首诗
updatePoemDisplay();

// 切换诗词函数
function changePoem() {
// 淡出效果
poemText.style.opacity = "0";

setTimeout(() => {
    // 更新诗词索引
    currentPoemIndex = (currentPoemIndex + 1) % poems.length;
    updatePoemDisplay();

    // 淡入效果
    poemText.style.opacity = "1";
}, 500); // 等待淡出完成
}

// 更新诗词显示
function updatePoemDisplay() {
const poem = poems;
// 修改了这里，添加了font-size:24px保持与正文统一
let poemHTML = `<p class="title" style="font-size:24px">${poem.title}</p>`;
poem.content.forEach(line => {
    poemHTML += `<p>${line}</p>`;
});
poemText.innerHTML = poemHTML;
}

// 绑定按钮事件
poemButton.addEventListener('click', changePoem);
</script>

<video loop autoplay src="https://cccimg.com/view.php/0583b6799fa18710fb84d0f638a2aa1c.mp3"></video>

梦江南 发表于 2025-12-30 07:22

哇，好漂亮的滚动大图，是AI作图的啊！诗图合一，让人陶醉！早上好！{:4_187:}

霜染枫丹 发表于 2025-12-30 12:50

梦江南 发表于 2025-12-30 07:22
哇，好漂亮的滚动大图，是AI作图的啊！诗图合一，让人陶醉！早上好！

欢迎梦江南，是AI制作的图片。想要菊花俯视霜花的图片很难拍到，有了AI就能轻松生成，‘谢谢你的支持，祝你马年吉祥！！

https://www.huachaowang.com/forum.php?mod=attachment&aid=NDgzNjd8OGRjMjczMzR8MTc2NzA3MDA2M3w3OTg1fDg5MzU5&noupdate=yes

杨帆 发表于 2025-12-30 13:16

心语与美图交相辉映，谢谢枫丹精彩分享{:4_204:}

霜染枫丹 发表于 2025-12-30 13:53

杨帆 发表于 2025-12-30 13:16
心语与美图交相辉映，谢谢枫丹精彩分享

感谢杨帆的支持，下午好~~

https://www.huachaowang.com/forum.php?mod=attachment&aid=NDgzNjd8OGRjMjczMzR8MTc2NzA3MDA2M3w3OTg1fDg5MzU5&noupdate=yes

偶然~ 发表于 2025-12-30 16:36

音画唯美

偶然~ 发表于 2025-12-30 16:36

制作大气磅礴

偶然~ 发表于 2025-12-30 16:36

新年新起点，愿勇气伴你前行，智慧助你成功，幸福与你同行！

霜染枫丹 发表于 2025-12-30 19:48

偶然~ 发表于 2025-12-30 16:36
新年新起点，愿勇气伴你前行，智慧助你成功，幸福与你同行！

偶然晚上好！！有幸一起跨年，很高兴，祝您元旦快乐！！




https://www.yueyijyw.com/data/attachment/forum/202512/30/194739f5v777pfz5ch4k76.jpg

红影 发表于 2025-12-30 20:00

这个《夜与己》只有一么，看到这样的标注一般想到还应该有二三的啊{:4_204:}

红影 发表于 2025-12-30 20:02

这图图很清冷美丽，文字也好，很赞{:4_187:}

霜染枫丹 发表于 2025-12-30 20:04

红影 发表于 2025-12-30 20:00
这个《夜与己》只有一么，看到这样的标注一般想到还应该有二三的啊

点击下面的《切换下一段》按钮，就显示第二节了。我就写了2段，多些可以一直切换

{:4_204:}{:4_190:}
https://www.yueyijyw.com/data/attachment/forum/202512/30/194739f5v777pfz5ch4k76.jpg

霜染枫丹 发表于 2025-12-30 20:08

红影 发表于 2025-12-30 20:02
这图图很清冷美丽，文字也好，很赞

图是用AI制作的，现在AI制图比我拍的好多了，输入文字就生成了。文字我想自己写一点，就算每天动动脑。格律诗等我不懂，这样随意说点不拘束，不能算作是诗，就是几句话，借这个栏目每天完成一个作业。谢红影支持！{:4_189:}{:4_190:}{:4_189:}{:4_204:}

红影 发表于 2025-12-30 20:47

霜染枫丹 发表于 2025-12-30 20:04
点击下面的《切换下一段》按钮，就显示第二节了。我就写了2段，多些可以一直切换


...

是的，看到了，有切换按钮呢，之前没注意。嗯吗，这个制作很棒{:4_187:}

红影 发表于 2025-12-30 20:49

霜染枫丹 发表于 2025-12-30 20:08
图是用AI制作的，现在AI制图比我拍的好多了，输入文字就生成了。文字我想自己写一点，就算每天动动脑。格 ...

枫丹的做法很赞，这样的玩法非常雅致，也很文艺范，腹有诗书气自华，出得门去，也自带一股雅意的芬芳呢{:4_187:}

霜染枫丹 发表于 2025-12-30 21:01

红影 发表于 2025-12-30 20:47
是的，看到了，有切换按钮呢，之前没注意。嗯吗，这个制作很棒

就是瞎玩，您现在没时间，我的时间只是偶尔紧张一些。{:4_204:}{:4_190:}

霜染枫丹 发表于 2025-12-30 21:04

红影 发表于 2025-12-30 20:49
枫丹的做法很赞，这样的玩法非常雅致，也很文艺范，腹有诗书气自华，出得门去，也自带一股雅意的芬芳呢{: ...

哈哈哈哈~~听到夸奖可是很乐很乐了呢。{:4_173:}我贪玩，没什么正经事情，谢谢红影！！

查看完整版本: 夜与己 AI制图 大图滚动+2段诗歌