本帖最后由 花简静 于 2024-9-10 19:49 编辑
<style>
#papa { --width: 1200px; margin: 30px 0 30px calc(50% - (var(--width) / 2 + 90px)); 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.3; }
.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[curIdx];
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[0].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,...[player]].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[0].style.animationName = 'rot';
</script>
| 
