【黑师代码】赤壁怀古（学习黑师20240701《西亚风光》米字形圆环小播效果）
<style>#papa { --width: 1200px; margin: 130px 0 30px calc(50% - (var(--width) / 2 + 81px)); width: var(--width); height: 1700px; background: url('https://642303.freep.cn/642303/tu/guang01.webp') no-repeat center/cover; z-index: 1; overflow: hidden; box-shadow: 3px 3px 8px #666; position: relative; }
#txtbox { position: absolute; right: 360px; top: 1220px; width: 650px; min-height: 120px; padding: 10px 20px; box-sizing: border-box; overflow: hidden;writing-mode:vertical-rl; letter-spacing: 3px;}
#txtbox p { position: relative; margin: 4px 0; padding: 0; font: normal 30px/36px sans-serif; color:Orange; txtAr-shadow: 1px 1px 1px gray; animation: 2s forwards; }
#player { position: absolute; left: calc(50% - 180px); top: 560px; width: 320px; height: 320px; background: linear-gradient(Gold, Orange) repeat-y center/3% 4%, linear-gradient(to right,Gold, Orange) repeat-x center/4% 3%; border: thick double; border-color: Gold Orange; border-radius: 50%; cursor: pointer; animation: rot 6s linear infinite var(--state); }
#player::before, #player::after { position: absolute; content: ''; opacity: 0.3;}
#player::before { inset: 0; background: inherit; transform: rotate(45deg); }
#player::after { inset: 136px; background: url('https://642303.freep.cn/642303/za/ooo.png') no-repeat 50%/96%; border-radius: 50%; opacity: 0.99;}
.vid { position: absolute; width: 100%; height: 50%; object-fit: cover; pointer-events: none; }
.vid:nth-of-type(1) { position: absolute; width: 320px; height: 320px; left:410px;top:560px;object-fit: cover;border-radius: 50%;opacity: 0.95; pointer-events: none;mix-blend-mode: screen;transform: rotateY(180deg); }
.vid:nth-of-type(2) { height: 100%; top: 0; mix-blend-mode: screen;opacity: 0.5; }
.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=1827002464" autoplay loop></audio>
<div id="txtbox"></div>
<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/08/40/5d21b610e8f58.mp4" autoplay loop muted></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/16/5e1c373af3b57.mp4" autoplay loop muted></video>
<div id="player" titel="播放/暂停"></div>
</div>
<script>
var vids = papa.querySelectorAll('.vid');
var txtAr = [
`<span><strong>《念奴娇·赤壁怀古》</strong></span><br><br>\n 大江东去，浪淘尽，\n千古风流人物。 \n 故垒西边，人道是，\n三国周郎赤壁。 \n 乱石穿空，惊涛拍岸\n卷起千堆雪。 \n 江山如画，一时多少豪杰。 \n 遥想公瑾当年，小乔初嫁了\n雄姿英发。 \n 羽扇纶巾，谈笑间\n樯橹灰飞烟灭。 \n 故国神游，多情应笑我\n早生华发。 \n 人生如梦，一尊还酹江月。 \n<span class="tRight">—— 【宋】苏轼 </span>`,
`<span><strong>《 临江仙》</strong></span><br><br>\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 = () => {
player.style.setProperty('--state',['running','paused'][+aud.paused]);
[...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 = 'rot';
</script>
@马黑黑 白老师来瞧一眼，交一份今天的小播效果作业{:4_173:} 小播只是放大了，画面太空，加了诗词，改了竖版。。 @樵歌
这个很震撼，用色大胆（不是指色胆包天哈）、小播图案设计唯美、动感恰到好处。
此外，不再用多多的 br 标签是个大进步。 马黑黑 发表于 2024-7-1 23:32
@樵歌
这个很震撼，用色大胆（不是指色胆包天哈）、小播图案设计唯美、动感恰到好处。
{:4_170:}老师看到作业了啊，那就放心呼去了。。。古得小白哈。 马黑黑 发表于 2024-7-1 23:32
@樵歌
这个很震撼，用色大胆（不是指色胆包天哈）、小播图案设计唯美、动感恰到好处。
白老大，你应该夸我一下这回没喊救命 。。好不容易让它们全部都受控制的停下{:4_170:} 月儿这个厉害了，把今天的小播和前面的诗词都集中到一个帖子里了，而且用了文字竖排。
整个帖子非常大气，太赞了{:4_199:} 这个篇幅设计也很合理，为了给诗词留位置，整个底图也设计成了竖向的，让帖子更大气。
竖排文字从右到左，也很符合古诗词的书写方式呢{:4_187:} 马黑黑 发表于 2024-7-1 23:32
@樵歌
这个很震撼，用色大胆（不是指色胆包天哈）、小播图案设计唯美、动感恰到好处。
不知道为什么第一遍循环的时候，第一首诗词的标题《念奴娇·赤壁怀古》在整首词显示完后，会再出来一次，到第二遍循环的时候就都正常了。看了半天没看出来时怎么回事。 这两首词也都是非常喜欢的，很有英雄气概的词句，和背景十分相配呢{:4_187:} 好壮观，赞！{:4_199:} 马黑黑 发表于 2024-7-1 23:32
@樵歌
这个很震撼，用色大胆（不是指色胆包天哈）、小播图案设计唯美、动感恰到好处。
音画都非常震憾！我进去学习哈这种版面文字是怎么出来的，字保持的时间也长。{:4_204:} 画面波澜壮阔！配合音乐也很震憾，貌似穿越了一样的。 这个震撼了，中间的象个时光机来的 樵歌 发表于 2024-7-2 16:39
音画都非常震憾！我进去学习哈这种版面文字是怎么出来的，字保持的时间也长。
爱多长可以有多长 红影 发表于 2024-7-1 23:51
不知道为什么第一遍循环的时候，第一首诗词的标题《念奴娇·赤壁怀古》在整首词显示完后，会再出来一次， ...
哪里出了点问题了。