【黑师代码】四季予你 TO:小辣椒（学习黑师20240629《长相思》文字逐显）
<style>
#papa { --width: 1700px; margin: 120px 0 20px calc(50% - (var(--width) / 2 + 81px)); width: var(--width); height: 900px; background: url('https://642303.freep.cn/642303/tu/bei.webp') 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://642303.freep.cn/642303/tu/gufengnv01.png'); z-index: 3;}
#txtbox { position: absolute; right: 360px; top: 280px; width: 340px; min-height: 90px; padding: 10px 20px; box-sizing: border-box; overflow: hidden; }
#txtbox p { position: relative; margin: 4px 0; padding: 0; font: normal 30px/36px sans-serif; color: SaddleBrown; txtAr-shadow: 1px 1px 1px gray; animation: 2s forwards; }
#player { position: absolute; width: 120px; right: 880px; bottom: 310px; cursor: pointer; animation: rot 6s linear infinite;opacity: 0.65; z-index: 5;}
#vid1 { position: absolute; width: 580px; height: 580px; left:310px;top:80px;object-fit: cover;border-radius: 50%;opacity: 0.95; pointer-events: none;transform: rotateY(180deg); }
#vid2 { position: absolute; width: 100%; height: 100%; clip-path: polygon(0 0,80% 0,80% 20%,100% 20%,100% 100%,0 100%);object-fit: cover; mix-blend-mode: screen; opacity: 0.9; pointer-events: none; z-index: 4;transform: rotateY(180deg);}
.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=1909961703" autoplay loop></audio>
<video id="vid1" src="https://img.tukuppt.com/video_show/19287209/00/14/63/5e58bbdc51116.mp4" muted autoplay loop></video>
<video id="vid2" src="https://img.tukuppt.com/video_show/6181262/01/28/52/6291f470c613a.mp4" muted autoplay loop></video>
<div id="txtbox"></div>
<img id="player" alt="" src="https://638183.freep.cn/638183/small/hxxb.webp" title"播放/暂停" />
</div>
<script>
var txtAr = [
`<span><strong>《诗经 邶风 击鼓》</strong></span><br><br>\n击鼓其镗，踊跃用兵。\n土国城漕，我独南行。\n从孙子仲，平陈与宋。\n不我以归，忧心有忡。\n爰居爰处？爰丧其马？\n于以求之？于林之下。\n死生契阔，与子成说。\n执子之手，与子偕老。\n于嗟阔兮，不我活兮。\n于嗟洵兮，不我信兮。\n`,
`<span><strong>‌‌‌‌《 长 相 思 》</strong></span><br><br>\n日色欲尽花含烟，\n月明欲素愁不眠。\n赵瑟初停凤凰柱，\n蜀琴欲奏鸳鸯弦。\n此曲有意无人传，\n愿随春风寄燕然。\n忆君迢迢隔青天。\n昔时横波目，\n今作流泪泉。\n不信妾肠断，\n归来看取明镜前。\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 mState = () => {
[...paras,...].forEach(p => p.style.animationPlayState = aud.paused ? 'paused' : 'running');
aud.paused ?(vid1.pause(),vid2.pause()) :(vid1.play(), vid2.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>
@小辣椒
谢谢你送的章子，很是开心。
今天跟的新效果送给你。。{:4_187:} @马黑黑 白老师来瞧一眼，这个双视频的自己终于会有机组合了。{:4_170:} 很精彩啊，用的2个视频代码吗{:4_199:} 配色得当，图美帖美歌美动画美创意更美。 月儿真快，又是最新代码的创作呢，太给力了{:4_199:} 这个设想很好，诗词的出现在纯净背景上是最好的，这个月儿加了镂空背景，让窗外和窗内都有视频效果，
颜色调配也极好。给月儿点赞{:4_199:} 欣赏老师的精彩音画！ @小辣椒 收礼开森 马黑黑 发表于 2024-6-30 09:20
@小辣椒 收礼开森
老师你早啊。。上牛奶咖啡面包煎蛋{:4_170:} 梦江南 发表于 2024-6-30 08:48
欣赏老师的精彩音画！
感谢支持{:4_190:} 红影 发表于 2024-6-29 22:55
这个设想很好，诗词的出现在纯净背景上是最好的，这个月儿加了镂空背景，让窗外和窗内都有视频效果，
颜色 ...
素材上有个窗，里面的图本来是固定的，感觉动态比较好看，就变成这样了{:4_187:} 红影 发表于 2024-6-29 22:53
月儿真快，又是最新代码的创作呢，太给力了
周末比较有时间，纯套用，连诗都保留了一首{:4_173:} 马黑黑 发表于 2024-6-29 22:45
配色得当，图美帖美歌美动画美创意更美。
数了一下共有五美{:4_170:}。。美滋滋的乐一个 小九 发表于 2024-6-29 22:27
很精彩啊，用的2个视频代码吗
是的，窗内一个视频，外面大屏上飘花一个视频{:4_187:} 南无月 发表于 2024-6-30 09:51
数了一下共有五美。。美滋滋的乐一个
五美制帖人 南无月 发表于 2024-6-30 09:48
老师你早啊。。上牛奶咖啡面包煎蛋
吃饱了，保鲜留明天吃 南无月 发表于 2024-6-30 09:50
素材上有个窗，里面的图本来是固定的，感觉动态比较好看，就变成这样了
月儿的灵机一动，让我们看到了灵机之美{:4_187:} 南无月 发表于 2024-6-30 09:50
周末比较有时间，纯套用，连诗都保留了一首
诗句不是事，月儿构思的场景特别赞{:4_187:} 红影 发表于 2024-6-30 15:56
月儿的灵机一动，让我们看到了灵机之美
{:4_173:}好哒，有你的称赞就是开心，做贴的快乐就源于此