学习帖（宝塔诗）鸣谢红影的代码
本帖最后由 梦江南 于 2024-7-6 18:04 编辑 <br /><br /><style>#papa { --width: 1024px; margin: 20px 0 20px calc(50% - (var(--width) / 2 + 81px)); width: var(--width); height: 600px; box-shadow: 3px 3px 8px #666; user-select: none; z-index: 1; position: relative; overflow: hidden; }
#txtbox { position: absolute; left: 270px; top: 60px; width: 460px; min-height: 60px; padding: 10px 20px; box-sizing: border-box; overflow: hidden; }
#txtbox p { position: relative; margin: 4px 0; padding: 0; text-align: center; font: normal 26px/32px \6977\4F53; color:#F0FFFF; txtAr-shadow: 1px 2px 1px #F0FFFF; animation: 2s forwards; }
#player { position: absolute; width: 120px; left: 436px; opacity: 0.85; bottom: 20px; cursor: pointer; animation: rot 6s linear infinite; }
.vid { position: absolute; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.vid:nth-of-type(1) { width: 110%; left: 0px; opacity: 1; }
.vid:nth-of-type(2) { height: 110%; top: -10%; transform: rotateY(180deg); mix-blend-mode: screen; opacity: 0.15; }
.tMid, .tRight { display: inline-block; width: 100%; }
.tMid { text-align: center; font-size: 28px; }
.tRight { text-align: right; font-size: 18px; }
@keyframes move { to { transform: translate(0); } }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1907221157" autoplay loop></audio>
<video class="vid" src="https://xsj-video.699pic.com/00/mm/fa.mp4 " muted autoplay loop></video>
<video class="vid" src="https://video.699pic.com/videos/71/98/30/a_ydVtCrF1QH1Z1585719830_10s.mp4" autoplay loop muted></video>
<div id="txtbox"></div>
<img id="player" alt="" src="https://pic.imgdb.cn/item/668556fdd9c307b7e9a6497c.png" title"播放/暂停" />
</div>
<script>
var txtAr = [
`<span class="tMid"><strong>宝塔诗</strong>（一七令 诗）</span><br><br>\n诗，\n绮美，瑰奇
\n明月夜，落花时。\n能助欢乐，亦伤别离.\n调请金石怨，呤苦鬼神悲。\n天下只应爱我，世间唯有君知。
\n自从都尉别苏句，使到司空送白辞。\n<br>\n<span class="tRight">——白居易</span>`,
`<span class="tMid"><strong>一七令</strong>（水）</span><br><br>\n水，\n随形，无畏。\n自地涌，从天坠。\n有志低就，无争至伟。\n进退顺势为，刚柔皆智慧。\n能容任由咸淡，润物凭妩媚。\n四汪云雨起风雷，三态纵横塑大美。<br>\n<span class="tRight">——无名</span>`,
`<span class="tMid"><strong>一七令</strong>（ 茶 ）</span><br><br>\n茶 ，\n香叶，嫩芽。\n幕诗客，爱僧家。\n碾雕白玉，罗织红纱。\n铫煎黄蕊色，碗转曲尘花。\n夜后邀陪明月，晨前命对朝霞。\n海尽古今人不倦，将知醉后岂堪夸。<br>\n<span class="tRight">——元镇</span>`,
];
var curIdx = 0;
var paras = [];
var ww = txtbox.offsetWidth;
var addPs = () => {
var txtstr = txtAr;
txtbox.innerHTML = '';
paras.length = 0;
var ar = txtstr.split(/\n/).filter(item => item !=='');
ar.forEach((p,k) => {
var para = document.createElement('p');
para.innerHTML = p;
para.style.cssText += `transform: translate(${ww}px);`;
txtbox.appendChild(para);
paras.push(para);
});
curIdx = (curIdx + 1) % txtAr.length;
mkAni();
};
var parasReset = () => {
addPs();
paras.forEach(p => {
p.style.animationName = '';
p.style.transform = 'translate(${ww}px)';
setTimeout( () => { paras.style.animationName = 'move'; }, 500);
});
};
var mkAni = () => {
paras.forEach((p,k) => {
p.onanimationend = () => {
paras[(k+1) % paras.length].style.animationName = 'move';
if(k === paras.length - 1) setTimeout( () => parasReset(), 10000);
};
});
};
var vids = papa.querySelectorAll('.vid');
var mState = () => {
[...paras,...].forEach(p => p.style.animationPlayState = aud.paused ? 'paused' : 'running');
vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
player.title = ['暂停', '播放'][+aud.paused];
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
addPs();
paras.style.animationName = 'move';
</script>
学习、学习、再学习。一份耕耘，一份收获。在学习的道路上，不断努力，追求卓越。 梦油 发表于 2024-7-6 18:26
学习、学习、再学习。一份耕耘，一份收获。在学习的道路上，不断努力，追求卓越。
谢谢梦油版主首席关注支持鼓励！ 梦油 发表于 2024-7-6 18:26
学习、学习、再学习。一份耕耘，一份收获。在学习的道路上，不断努力，追求卓越。
说得真好，学习、学习，再学习。在学习的道路上，不断努力，追求卓越。
虽然谈不上追求卓越，但有一点，活到老学到老，生活乐趣在其中。 https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif 问好梦江南，很漂亮的制作{:4_187:}{:4_199:} 这个好，比我那个漂亮。这几首一七令也好看，大都是很熟悉的好词{:4_199:} 欣赏梦江南好帖，这个太美了{:4_199:} 起个网名好难 发表于 2024-7-6 19:51
谢谢难难老师分享支持，早上好！{:4_204:} 小辣椒 发表于 2024-7-6 20:05
问好梦江南，很漂亮的制作
谢谢小辣椒老师分享支持鼓励，早上好！{:4_204:} 红影 发表于 2024-7-6 20:50
这个好，比我那个漂亮。这几首一七令也好看，大都是很熟悉的好词
谢谢影子分享支持鼓励，这三首一七令是从网上找来的。早上好！{:4_204:} 红影 发表于 2024-7-6 20:51
欣赏梦江南好帖，这个太美了
谢谢影子，今天是星期天要好好休息休息了。{:4_187:} 梦江南 发表于 2024-7-7 07:40
谢谢小辣椒老师分享支持鼓励，早上好！
梦江南客气了{:4_187:} 梦江南 发表于 2024-7-6 18:47
谢谢梦油版主首席关注支持鼓励！
哈哈哈！首席回帖。{:5_117:} 梦江南 发表于 2024-7-6 18:53
说得真好，学习、学习，再学习。在学习的道路上，不断努力，追求卓越。
虽然谈不上追求卓越，但有一点， ...
越做越好。{:5_116:} 梦江南 发表于 2024-7-7 07:41
谢谢影子分享支持鼓励，这三首一七令是从网上找来的。早上好！
还是很喜欢这个词牌的，句句对仗，很见功力，而且排布出来也好看{:4_204:} 梦江南 发表于 2024-7-7 07:43
谢谢影子，今天是星期天要好好休息休息了。
是啊，放松地看了一下午的综艺节目，嘻嘻哈哈的，也挺快乐{:4_173:}
页:
[1]