浣溪沙（学习黑黑汉字逐字显示效果）
<style>#papa { margin: 80px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: tan; box-shadow: 0 0 10px gray;position: relative; display: grid; place-items: center; --state: paused; }
.vid { position: absolute; width: 1024px; height: 640px; object-fit: cover; opacity: 1; }
.mypic { position: absolute;left: 32px;top: 380px; }
.mypic1 { position: absolute;left: 460px;top: 262px; }
css-doodle { position: absolute; }
</style>
<div id="papa">
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/a54ec91d6e00afa83db50590685d361a_preview.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<img class="mypic" src="https://z3.ax1x.com/2021/08/26/hujGMd.gif" alt="" />
<img class="mypic1" src="https://pic2.imgdb.cn/item/646505580d2dde5777410cd0.png" alt="" />
<css-doodle grid="1x1" id="mplayer">
:doodle{ @size: 100px;left:726px;top: 150px; z-index: 40; clip-path: @shape(fill: evenodd; points: 50; scale: .45; x: cos(2t) + cos(π - 7t);y: sin(2t) + sin(7t);); background: tan; cursor: pointer; animation: rot 4s infinite linear var(--state); }
@keyframes rot { to { transform: rotate(360deg); } }</css-doodle>
<css-doodle grid="8x8" click-to-update="">
:doodle {
@size: 320px 320px;left: 680px;top: 270px;cursor: pointer;z-index: 50;}
@size: 30px;@place: calc(@col * 30px - 15px) calc(@row * 30px - 15px);font: normal 24px / 40px sans-serif;color:tan;text-shadow: 1px 1px 2px #000;opacity: 0;:before {content: @pn([《浣溪沙·春情》▷▷宋·苏轼◁◁道字娇讹苦未成，未应春阁梦多情。朝来何事绿鬟倾。彩索身轻长趁燕，红窗睡重不闻莺。困人天气近清明。]);}animation: show .3s calc((@i - 1) * .3s) linear forwards var(--state);@keyframes show { to { opacity: 1; } }</css-doodle>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1391215364.mp3" autoplay loop></audio>
<script>
(function() {
let vid = document.querySelector('.vid');
let script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.8/css-doodle.min.js';
document.head.appendChild(script);
let mState = () => aud.paused ? (papa.style.setProperty('--state', 'paused'), vid.pause()) : (papa.style.setProperty('--state', 'running'), vid.play());
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script> 做的时候遇到问题，竟然是非常低级的少半边括号，弄得耽误很多时间，帖子都没法回复了{:4_173:}
感谢[@马黑黑的代码，有这个代码，以后诗词可以弄到音画里了{:4_187:} 懒得去找动图，借用了亦是金老师的蝴蝶。感谢@亦是金老师{:4_187:}
而且好像图床有点问题，我上传一本书，本地演示的时候总不出来，就那么小的一个文件都不出来。气人。 @南无月那个空格我填进去怎么总出现问题，我用搜狗的文字空格填进去也对齐不了，后来索性弄几个符号占位{:4_173:}
你的空格怎么弄的啊，是不是只有一个空格是可以的？我的作者那里貌似空格多了点。 哎呀，这么晚了，赶紧逃了{:4_193:} 很优雅的样纸，赞个 辛苦啦！好漂亮，真行！ 俩学霸旗鼓相当！美得各有特色！{:4_187:} 能把老师的神通远用得如化境，这个老师也足以自慰了！@马黑黑 是木是特别有成就感{:4_190:} 樵歌 发表于 2023-5-18 08:05
能把老师的神通远用得如化境，这个老师也足以自慰了！@马黑黑 是木是特别有成就感
{:4_181:} 哈哈哈，师兄以后乱吐人是不是只换字连图啥的都不动了，整个抄个过用@红影 还有看子那位置只能放绝律或小今儿？ 马黑黑 发表于 2023-5-18 08:06
这个特好！惠及众文艺小资老客{:4_189:} 樵歌 发表于 2023-5-18 08:19
这个特好！惠及众文艺小资老客
目前，我的演示，主要针对各行字数一样的 欣赏佳作，上午好！ 好美的图，写得好，曲子好听。{:4_204:} 醉美水芙蓉 发表于 2023-5-18 06:43
欣赏红影美女佳作！
问好水芙蓉美女，感谢你第一个临帖{:4_187:} 醉美水芙蓉 发表于 2023-5-18 06:45
红影做贴辛苦了！
是我自己弄错了代码，少了半边括号，多折腾了好多时间{:4_173:} 马黑黑 发表于 2023-5-18 07:33
很优雅的样纸，赞个
谢谢黑黑的代码，用了你雨夜里的那个播放器按钮和逐字代码{:4_204:}