学习帖【大江东去】
本帖最后由 梦江南 于 2024-7-2 18:02 编辑 <br /><br /><style>#papa { --width: 1000px; margin: 20px 0 20px calc(50% - (var(--width) / 2 + 81px)); width: var(--width); height: 562px; background: url('https://pic.imgdb.cn/item/668107aed9c307b7e9d08977.png') no-repeat center/cover; box-shadow: 3px 3px 8px #666; user-select: none; z-index: 1; position: relative; }
#papa::before { position: absolute; content: url('https://638183.freep.cn/638183/small/hf.webp'); mix-blend-mode: lighten; filter: blur(1px); }
#txtbox { position: absolute; left: 20px; top: 20px; width: 300px; min-height: 60px; padding: 10px 20px; box-sizing: border-box; overflow: hidden; }
#txtbox p { position: relative; margin: 4px 2; padding: 0; font: normal 24px/26px sans-serif; color: Blue; txtAr-shadow: 2px 1px 2px gray; animation: 2s forwards; }
#player { position: absolute; width: 120px; right: 60px; bottom: 200px; cursor: pointer; animation: rot 6s linear infinite; }
#vid { position: absolute; width: 100%; height: 50%; object-fit: cover; mix-blend-mode: screen; opacity: 0.8; pointer-events: none; }
.tMid, .tRight { display: inline-block; width: 100%; }
.tMid { text-align: center; }
.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=35497772" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2402760/00/01/67/5b483eab6f0a1.mp4" muted autoplay loop></video>
<div id="txtbox"></div>
<img id="player" alt="" src="https://638183.freep.cn/638183/t23/btn/meihua_133482968750383750.png" title"播放/暂停" />
</div>
<script>
var txtAr = [
`<span class="tMid"><strong>《念奴娇·古赤壁怀》
宋代：</strong>苏轼</span><br>\n大江东去，浪淘尽，\n千古风流人物。\n故垒西边，人道是，\n三国周郎赤壁。\n乱石穿空，惊涛拍岸，\n卷起千堆雪。\n江山如画，\n一时多少豪杰。\n<span class="tRight">——上阙</span>`,
`<span class="tMid"><strong>《念奴娇·古赤壁怀》<br></strong><br>下阙</span><br>
\n遥想公瑾当年，\n小乔初嫁了，\n雄姿英发。\n羽扇纶巾，谈笑间，\n樯橹灰飞烟灭。\n故国神游，\n多情应笑我，\n早生华发。\n人生如梦，\n一尊还酹江月。</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 mState = () => {
[...paras,...].forEach(p => p.style.animationPlayState = aud.paused ? 'paused' : 'running');
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> https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif 起个网名好难 发表于 2024-7-1 15:49
谢谢老师沙发支持，问好！{:4_204:} 欣赏老师的精美音画，点赞！
老谟深虑 发表于 2024-7-1 16:28
欣赏老师的精美音画，点赞！
谢谢老谟老师分享支持，问好！{:4_204:} 欣赏佳作，问候梦江南。 梦油 发表于 2024-7-1 17:06
欣赏佳作，问候梦江南。
谢谢梦油老师分享支持！问好！{:4_204:} 这速度也是没谁了！{:4_199:} 这个背景和歌曲及诗词很相配呢。欣赏梦江南好帖{:4_199:} 这个帖子把一首词的上下阕分开两部分发了啊{:4_173:} 欣赏梦江南的精彩作业制作，加油！ 有些元素最好能替换成自己的{:4_187:} 制作精彩，速度的啊 樵歌 发表于 2024-7-1 18:14
这速度也是没谁了！
谢谢樵歌管理员鼓励支持，早上好！{:4_204:} 红影 发表于 2024-7-1 20:36
这个背景和歌曲及诗词很相配呢。欣赏梦江南好帖
谢谢影子分享支持，早上好！{:4_204:} 红影 发表于 2024-7-1 20:37
这个帖子把一首词的上下阕分开两部分发了啊
是的，苏轼的这首词正好分为上下两段。 小辣椒 发表于 2024-7-1 20:38
欣赏梦江南的精彩作业制作，加油！
谢谢小辣椒管理员支持鼓励，我会加油的！{:4_204:} 红影 发表于 2024-7-1 20:52
有些元素最好能替换成自己的
嗯，下做作业试试。 绿叶清舟 发表于 2024-7-1 21:29
制作精彩，速度的啊
谢谢绿叶清舟版主支持鼓励，喜欢您的作品。早上好！{:4_204:} 梦江南 发表于 2024-7-1 17:08
谢谢梦油老师分享支持！问好！
梦江南朋友别客气。