红影 发表于 2025-2-17 11:49

樵歌消寒词之《啰唝曲》


<style>
      #papa { margin: 60px 0 30px calc(50% - 681px); width: 1200px; height: 674px; background: url('https://pic1.imgdb.cn/item/67b2b078d0e0a243d40018b6.jpg') no-repeat center/cover; box-shadow: 3px 3px 8px black; display: grid; place-items: center; position: relative; font-size: 0; border-radius:32px; z-index: 1;}
      #stage { position: absolute; width: 208px; height: 400px;white-space: nowrap; cursor: pointer; font-size: 36px; color:red; overflow: hidden; text-align: center; right: 180px; top: 90px; }
      #stage > div{ width: 100%; height: 100%; display: inline-block; }
      #pic { position: absolute; width: 160px; height: 285px; top: 250px; left: 600px;mix-blend-mode: Multiply; }
      #btnplay { --state: running; position: absolute; top: 270px; left:750px; width: 26px; height: 26px; color: red; display: grid; place-items: center; cursor: pointer; font-size: 16px; }
      #btnplay::before { position: absolute; content: ''; width: 100%; height: 100%; border: 2px dashed cyan; border-radius: 50%; animation: rot 8s linear infinite var(--state); }
      #btnplay:hover::before { border-style: dotted; }
      @keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
<div id="stage">
<div><p>第一天<br><br>雪梅谁更爱，<br>相依恋墨香。<br>雪魂冰作骨，<br>梅蕊傲群芳。<br></p></div>
<div><p>第二天<br><br>侵香风作柬，<br>吹过柔草茵。<br>蝶停花蕊静，<br>迷醉满园春。<br></p></div>
<div><p>第三天<br><br>柬择绮罗帕，<br>柔情侵春香。<br>草心迷路远，<br>风递与檀郎。<br></p></div>
<div><p>第四天<br><br>暗香侵柔雪，<br>兰草倚春风。<br>绣茵心化柬，<br>迷我万千重。<br></p></div>
<div><p>第五天<br><br>草茵侵香柬，<br>春风迷柔情。<br>花随流水去，<br>杜宇一声声。<br></p></div>
<div><p>第六天<br><br>柬自春风侵，<br>香从茵草来。<br>柔情蜜意在，<br>迷梦为君开。<br></p></div>
<div><p>第七天<br><br>草长莺飞处，<br>香侵春风柔。<br>迷烟茵氲散。<br>拆柬避人羞。<br></p></div>
<div><p>第八天<br><br>草茵迷烟处，<br>侵香春风来。<br>柔情谁解意，<br>捧柬笑颜开。<br></p></div>
<div><p>第九天<br><br>草侵春风绿，<br>茵席卧晴柔。<br>迷香随笔散，<br>飘柬载江流。<br></p></div></div>
      <div id="btnplay">1</div>
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=441617813" autoplay loop></audio>
      <img id="pic" alt="" src="https://pic1.imgdb.cn/item/67b212bbd0e0a243d4ffe45e.gif" />
      </div>

<script>
var lastIdx = 0, pTimer;
var divs = stage.querySelectorAll('div');
var mState = () => {
      btnplay.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      btnplay.title = stage.title = aud.paused ? '点击播放' : '点击暂停';
      aud.paused ? clearTimeout(pTimer) : turn2();
};
var turn2 = (idx) => {
      idx = Math.floor(Math.random() * divs.length);
      if(idx === lastIdx) idx = (idx+1) % divs.length;
      lastIdx = idx;
      btnplay.innerText = idx + 1;
      stage.scroll({left: idx * 216, top: 0, behavior: 'smooth'});
      if(pTimer) clearTimeout(pTimer);
      pTimer = setTimeout(turn2, 9000);
};
aud.onpause = aud.onplaying = () => mState();
stage.onclick = btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

红影 发表于 2025-2-17 11:51

@樵歌 学习黑黑图片翻页换成了文字，还用豆包做了个讲述动图，就算是师兄在为自己的词做演示吧{:4_173:}

红影 发表于 2025-2-17 11:56

@马黑黑 文字翻页弄出来了，但是碰到个问题，想做个滚动文字，说明是樵歌在讲述九首《啰唝曲》，可是滚动字的代码正确，在背景上怎么都不显示，加了z-index: 也不显示。后来想换个闪烁字来说明，结果也不出来，彻底晕了，折腾了好长时间也没弄出来，只能不加滚动字了。请教问题在哪？

红影 发表于 2025-2-17 11:58

好像AI还能做电脑朗诵，并能对口型，但这样每首滚动的时间更长了，何况我也不会，就不加电脑朗诵了，弄个人假装在朗诵吧{:4_173:}

起个网名好难 发表于 2025-2-17 12:43

https://dingyue.ws.126.net/2019/1117/f41c4906g00q12n55001ic200hs00hsg00hs00hs.gif

日子是挑着过的{:5_106:}

樵歌 发表于 2025-2-17 12:46

红影 发表于 2025-2-17 11:51
@樵歌 学习黑黑图片翻页换成了文字，还用豆包做了个讲述动图，就算是师兄在为自己的词做演示吧

师兄来了，看到师妹用代码技术加AI增持，一公子在装模作样滴炫耀诗词，就直笑。不过构思还是非常有创意的。

樵歌 发表于 2025-2-17 12:49

看表情满丰富的样子，很有趣，我估计要把声音和口型都 对上弄出来就太费事了，这样已经非常好了呵，虽然词不咋地，但这样一宣讲，也给人留下深的印象了。

樵歌 发表于 2025-2-17 12:54

我今天看了，豆包也能作简单的视频，哪天我来试。把我们辛苦写的消寒词用这种形式展示出来，增加趣味性和信心，说不定今年三久就用这种形式来搞，就有趣味了，这样可以两人合作去消寒，一人负责写字，一人负责用AI造境。。。{:4_189:}

樵歌 发表于 2025-2-17 12:56

@马黑黑 这个代码真好，顺过去倒过来都 能显示。真适用，接地气{:4_189:}

小文 发表于 2025-2-17 13:55

本帖最后由 小文 于 2025-2-17 19:05 编辑

十分有趣的图与文，欣赏不已。问好恩师！

杨帆 发表于 2025-2-17 16:04

樵歌消寒词写的棒，影子特效帖子制作美，谢谢分享

梦江南 发表于 2025-2-17 16:12

这种做法把我看呆了哈！AL人也加进去了，旋转图片变成文字了，这创意也太厉害了吧！{:4_187:}

梦油 发表于 2025-2-17 17:20

精巧制作拍案叫绝。

马黑黑 发表于 2025-2-17 18:28

樵歌 发表于 2025-2-17 12:56
@马黑黑 这个代码真好，顺过去倒过来都 能显示。真适用，接地气

这是影子在我的一些实现方法基础上自研而来的代码，属于影子的再创作。

马黑黑 发表于 2025-2-17 18:38

代码的规范性有助于查错和修改、扩充。以本帖HTML代码为例，原帖酱紫写：
<div id="papa">
<div id="stage">
<div><p>第一天<br><br>雪梅谁更爱，<br>相依恋墨香。<br>雪魂冰作骨，<br>梅蕊傲群芳。<br></p></div>
<div><p>第二天<br><br>侵香风作柬，<br>吹过柔草茵。<br>蝶停花蕊静，<br>迷醉满园春。<br></p></div>
<div><p>第三天<br><br>柬择绮罗帕，<br>柔情侵春香。<br>草心迷路远，<br>风递与檀郎。<br></p></div>
<div><p>第四天<br><br>暗香侵柔雪，<br>兰草倚春风。<br>绣茵心化柬，<br>迷我万千重。<br></p></div>
<div><p>第五天<br><br>草茵侵香柬，<br>春风迷柔情。<br>花随流水去，<br>杜宇一声声。<br></p></div>
<div><p>第六天<br><br>柬自春风侵，<br>香从茵草来。<br>柔情蜜意在，<br>迷梦为君开。<br></p></div>
<div><p>第七天<br><br>草长莺飞处，<br>香侵春风柔。<br>迷烟茵氲散。<br>拆柬避人羞。<br></p></div>
<div><p>第八天<br><br>草茵迷烟处，<br>侵香春风来。<br>柔情谁解意，<br>捧柬笑颜开。<br></p></div>
<div><p>第九天<br><br>草侵春风绿，<br>茵席卧晴柔。<br>迷香随笔散，<br>飘柬载江流。<br></p></div></div>
      <div id="btnplay">1</div>
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=441617813" autoplay loop></audio>
      <img id="pic" alt="" src="https://pic1.imgdb.cn/item/67b212bbd0e0a243d4ffe45e.gif" />
      </div>代码结构中各层级没有利用行首缩进体现出来，缺乏结构明晰性。可以考虑酱紫写：
<div id="papa">
    <div id="stage">
      <div>
            <p>第一天<br><br>雪梅谁更爱，<br>相依恋墨香。<br>雪魂冰作骨，<br>梅蕊傲群芳。<br></p>
      </div>
      <div>
            <p>第二天<br><br>侵香风作柬，<br>吹过柔草茵。<br>蝶停花蕊静，<br>迷醉满园春。<br></p>
      </div>
      <div>
            <p>第三天<br><br>柬择绮罗帕，<br>柔情侵春香。<br>草心迷路远，<br>风递与檀郎。<br></p>
      </div>
      <div>
            <p>第四天<br><br>暗香侵柔雪，<br>兰草倚春风。<br>绣茵心化柬，<br>迷我万千重。<br></p>
      </div>
      <div>
            <p>第五天<br><br>草茵侵香柬，<br>春风迷柔情。<br>花随流水去，<br>杜宇一声声。<br></p>
      </div>
      <div>
            <p>第六天<br><br>柬自春风侵，<br>香从茵草来。<br>柔情蜜意在，<br>迷梦为君开。<br></p>
      </div>
      <div><p>第七天<br><br>草长莺飞处，<br>香侵春风柔。<br>迷烟茵氲散。<br>拆柬避人羞。<br></p>
      </div>
      <div>
            <p>第八天<br><br>草茵迷烟处，<br>侵香春风来。<br>柔情谁解意，<br>捧柬笑颜开。<br></p></div>
      <div>
            <p>第九天<br><br>草侵春风绿，<br>茵席卧晴柔。<br>迷香随笔散，<br>飘柬载江流。<br></p>
      </div>
    </div>
    <div id="btnplay">1</div>
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=441617813" autoplay loop></audio>
    <img id="pic" alt="" src="https://pic1.imgdb.cn/item/67b212bbd0e0a243d4ffe45e.gif" />
</div>一般来说，第一个层级不缩进，第二个层级缩进4个空格（或一个Tab制表符，论坛代码显示模块会用8个空格替换），第三个层级退缩8个空格，以此类推。

红影 发表于 2025-2-17 19:01

起个网名好难 发表于 2025-2-17 12:43
日子是挑着过的

是的，不是顺序的，跳到哪首就介绍哪首了{:4_173:}

红影 发表于 2025-2-17 19:04

樵歌 发表于 2025-2-17 12:46
师兄来了，看到师妹用代码技术加AI增持，一公子在装模作样滴炫耀诗词，就直笑。不过构思还是非常有创意的 ...

如果在背景音乐下再加上人声朗诵就更好了，可那个要好几个软件联合使用，我不熟，再说这个不是顺序的，更不知道如何对应了{:4_173:}

红影 发表于 2025-2-17 19:06

樵歌 发表于 2025-2-17 12:49
看表情满丰富的样子，很有趣，我估计要把声音和口型都 对上弄出来就太费事了，这样已经非常好了呵，虽然词 ...

这书生摇头晃脑的，像不像在逐句朗读师兄的词句{:4_173:}

红影 发表于 2025-2-17 19:07

樵歌 发表于 2025-2-17 12:54
我今天看了，豆包也能作简单的视频，哪天我来试。把我们辛苦写的消寒词用这种形式展示出来，增加趣味性和信 ...

是的，用AI人物来朗读消寒词，一定会让写的人更有信心，做的人也更觉得有趣味{:4_173:}

红影 发表于 2025-2-17 19:08

樵歌 发表于 2025-2-17 12:56
@马黑黑 这个代码真好，顺过去倒过来都 能显示。真适用，接地气

就是黑黑那个文章翻页啊，看师兄也说要去做一个呢。其实用这个做诗词真的很好玩的{:4_173:}
页: [1] 2 3 4
查看完整版本: 樵歌消寒词之《啰唝曲》